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语句：适合处理多个条件，进行不同内容的渲染。