7种React条件渲染方式，总有一款适合你

2024-02-12 20:27:43

在React中，条件渲染是指根据某些条件来渲染不同的UI组件或元素。这是一种非常有用的技术，可以让我们创建动态且交互性强的应用程序。在本文中，我们将介绍7种在React中实现条件渲染的方法，并提供具体的步骤和示例代码。

1. if/else 语句

if/else语句是最简单也是最常用的条件渲染方法。我们可以使用它来检查一个条件是否为真，并根据结果渲染不同的组件或元素。

const isLoggedIn = true;

const content = isLoggedIn ? <Welcome /> : <Login />;

ReactDOM.render(content, document.getElementById('root'));

在上面的代码中，我们首先定义了一个布尔变量isLoggedIn，表示用户是否已登录。然后，我们使用if/else语句来检查isLoggedIn的值，并根据结果渲染不同的组件。如果isLoggedIn为真，则渲染Welcome组件；否则，渲染Login组件。

2. 三元运算符

三元运算符是另一种实现条件渲染的简便方法。它与if/else语句类似，但语法更简洁。

const content = isLoggedIn ? <Welcome /> : <Login />;

ReactDOM.render(content, document.getElementById('root'));

在上面的代码中，我们使用三元运算符来检查isLoggedIn的值，并根据结果渲染不同的组件。如果isLoggedIn为真，则渲染Welcome组件；否则，渲染Login组件。

3. switch语句

switch语句可以用来检查多个条件，并根据条件的值来渲染不同的组件或元素。

const userType = 'admin';

const content = (
  switch (userType) {
    case 'admin':
      return <AdminDashboard />;
    case 'user':
      return <UserDashboard />;
    default:
      return <Login />;
  }
);

ReactDOM.render(content, document.getElementById('root'));

在上面的代码中，我们首先定义了一个字符串变量userType，表示用户的类型。然后，我们使用switch语句来检查userType的值，并根据结果渲染不同的组件。如果userType是'admin'，则渲染AdminDashboard组件；如果是'user'，则渲染UserDashboard组件；否则，渲染Login组件。

4. JSX逻辑表达式

JSX逻辑表达式是一种在JSX中使用逻辑运算符（如&&、||和!）的语法。我们可以使用它来根据条件来渲染不同的组件或元素。

const isLoggedIn = true;

const content = (
  <div>
    {isLoggedIn && <Welcome />}
    {!isLoggedIn && <Login />}
  </div>
);

ReactDOM.render(content, document.getElementById('root'));

在上面的代码中，我们使用JSX逻辑表达式来检查isLoggedIn的值，并根据结果渲染不同的组件。如果isLoggedIn为真，则渲染Welcome组件；否则，渲染Login组件。

5. 布尔属性

布尔属性是一种可以在组件上设置的特殊属性。当布尔属性的值为真时，组件将被渲染；否则，组件将不会被渲染。

const isLoggedIn = true;

const WelcomeMessage = (props) => {
  return (
    <div>
      {props.isLoggedIn && <p>Welcome back!</p>}
    </div>
  );
};

ReactDOM.render(<WelcomeMessage isLoggedIn={isLoggedIn} />, document.getElementById('root'));

在上面的代码中，我们定义了一个WelcomeMessage组件，它接受一个名为isLoggedIn的布尔属性。当isLoggedIn为真时，组件将渲染一个欢迎信息；否则，组件将不渲染任何内容。

6. 状态管理

状态管理是一种管理组件状态的技术。我们可以使用状态管理库（如Redux或MobX）来在组件之间共享状态。这样，我们就可以根据状态的值来条件性地渲染组件或元素。

const store = createStore({
  isLoggedIn: true
});

const WelcomeMessage = (props) => {
  const isLoggedIn = useSelector(state => state.isLoggedIn);

  return (
    <div>
      {isLoggedIn && <p>Welcome back!</p>}
    </div>
  );
};

ReactDOM.render(<WelcomeMessage store={store} />, document.getElementById('root'));

在上面的代码中，我们使用Redux来管理状态。我们首先定义一个名为store的Redux存储，它包含一个名为isLoggedIn的布尔值。然后，我们定义了一个WelcomeMessage组件，它使用useSelector钩子来访问store中的isLoggedIn值。当isLoggedIn为真时，组件将渲染一个欢迎信息；否则，组件将不渲染任何内容。