论坛 › SqlServer › React 条件判断

九天猎人 发表于 2024-8-9 07:14:12

React 条件判断

 在 React 中，可以通过 JavaScript 的条件语句来动态渲染组件或元素。
以下是几种常用的在 React 中处置惩罚条件渲染的方法：
1. 利用 if 语句

在 render 方法或函数组件的返回值中利用 if 语句来决定渲染内容。
实例

import React from 'react';
import ReactDOM from 'react-dom/client';

class MyComponent extends React.Component {
render() {
    const isLoggedIn = this.props.isLoggedIn;
    let content;

    if (isLoggedIn) {
      content = <h1>Welcome back!</h1>;
    } else {
      content = <h1>Please sign up.</h1>;
    }

    return (
      <div>
      {content}
      </div>
    );
}
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />); 2. 利用三元运算符

在 JSX 中，可以利用三元运算符进行简洁的条件渲染。
实例

import React from 'react';
import ReactDOM from 'react-dom/client';

const MyComponent = (props) => {
const isLoggedIn = props.isLoggedIn;

return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
);
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />); 3. 利用逻辑与 (&&) 运算符

在 JSX 中，可以利用逻辑与运算符来进行条件渲染。如果条件为 true，则渲染反面的元素。
实例

import React from 'react';
import ReactDOM from 'react-dom/client';

const MyComponent = (props) => {
const isLoggedIn = props.isLoggedIn;

return (
    <div>
      {isLoggedIn && <h1>Welcome back!</h1>}
      {!isLoggedIn && <h1>Please sign up.</h1>}
    </div>
);
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />); 4. 利用 switch 语句

在需要处置惩罚多个条件时，可以在 render 方法中利用 switch 语句。
实例

import React from 'react';
import ReactDOM from 'react-dom/client';

class MyComponent extends React.Component {
render() {
    const userRole = this.props.userRole;
    let content;

    switch (userRole) {
      case 'admin':
      content = <h1>Welcome, Admin!</h1>;
      break;
      case 'user':
      content = <h1>Welcome, User!</h1>;
      break;
      case 'guest':
      content = <h1>Welcome, Guest!</h1>;
      break;
      default:
      content = <h1>Who are you?</h1>;
    }

    return (
      <div>
      {content}
      </div>
    );
}
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent userRole="admin" />); 小结



[*]if 语句：得当在 render 方法或函数组件的返回值中利用来决定渲染内容。
[*]三元运算符：得当在 JSX 中进行简洁的条件渲染。
[*]逻辑与 (&&) 运算符：得当在 JSX 中条件渲染，当条件为 true 时渲染元素。
[*]switch 语句：得当处置惩罚多个条件，进行不同内容的渲染。



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

查看完整版本: React 条件判断