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