在 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 = 
Welcome back!
;     } else {       content = 
Please sign up.
;     }      return (       
         {content}       
     );   } }  const root = ReactDOM.createRoot(document.getElementById('root')); root.render();

2. 使用三元运算符

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

实例

import React from 'react'; import ReactDOM from 'react-dom/client';  const MyComponent = (props) => {   const isLoggedIn = props.isLoggedIn;    return (     
       {isLoggedIn ? 
Welcome back!
 : 
Please sign up.
}     
   ); };  const root = ReactDOM.createRoot(document.getElementById('root')); root.render();

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

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

实例

import React from 'react'; import ReactDOM from 'react-dom/client';  const MyComponent = (props) => {   const isLoggedIn = props.isLoggedIn;    return (     
       {isLoggedIn && 
Welcome back!
}       {!isLoggedIn && 
Please sign up.
}     
   ); };  const root = ReactDOM.createRoot(document.getElementById('root')); root.render();

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 = 
Welcome, Admin!
;         break;       case 'user':         content = 
Welcome, User!
;         break;       case 'guest':         content = 
Welcome, Guest!
;         break;       default:         content = 
Who are you?
;     }      return (       
         {content}       
     );   } }  const root = ReactDOM.createRoot(document.getElementById('root')); root.render();

小结

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