React 条件判断

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

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

1. import React from 'react';
2. import ReactDOM from 'react-dom/client';
4. class MyComponent extends React.Component {
5.   render() {
6.     const isLoggedIn = this.props.isLoggedIn;
7.     let content;
9.     if (isLoggedIn) {
10.       content = <h1>Welcome back!</h1>;
11.     } else {
12.       content = <h1>Please sign up.</h1>;
13.     }
15.     return (
16.       <div>
17.         {content}
18.       </div>
19.     );
20.   }
21. }
23. const root = ReactDOM.createRoot(document.getElementById('root'));
24. root.render(<MyComponent isLoggedIn={true} />);

复制代码

2. 利用三元运算符

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

1. import React from 'react';
2. import ReactDOM from 'react-dom/client';
4. const MyComponent = (props) => {
5.   const isLoggedIn = props.isLoggedIn;
7.   return (
8.     <div>
9.       {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
10.     </div>
11.   );
12. };
14. const root = ReactDOM.createRoot(document.getElementById('root'));
15. root.render(<MyComponent isLoggedIn={true} />);

复制代码

3. 利用逻辑与 (&&) 运算符

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

1. import React from 'react';
2. import ReactDOM from 'react-dom/client';
4. const MyComponent = (props) => {
5.   const isLoggedIn = props.isLoggedIn;
7.   return (
8.     <div>
9.       {isLoggedIn && <h1>Welcome back!</h1>}
10.       {!isLoggedIn && <h1>Please sign up.</h1>}
11.     </div>
12.   );
13. };
15. const root = ReactDOM.createRoot(document.getElementById('root'));
16. root.render(<MyComponent isLoggedIn={true} />);

复制代码

4. 利用 switch 语句

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

1. import React from 'react';
2. import ReactDOM from 'react-dom/client';
4. class MyComponent extends React.Component {
5.   render() {
6.     const userRole = this.props.userRole;
7.     let content;
9.     switch (userRole) {
10.       case 'admin':
11.         content = <h1>Welcome, Admin!</h1>;
12.         break;
13.       case 'user':
14.         content = <h1>Welcome, User!</h1>;
15.         break;
16.       case 'guest':
17.         content = <h1>Welcome, Guest!</h1>;
18.         break;
19.       default:
20.         content = <h1>Who are you?</h1>;
21.     }
23.     return (
24.       <div>
25.         {content}
26.       </div>
27.     );
28.   }
29. }
31. const root = ReactDOM.createRoot(document.getElementById('root'));
32. root.render(<MyComponent userRole="admin" />);

复制代码

小结

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

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