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

返回顶部

菜鸟教程

React 条件判断

1. 使用 if 语句

实例

2. 使用三元运算符

实例

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

实例

4. 使用 switch 语句

实例

小结