React之条件渲染

2024-02-15 18:13:23

在React开发中，我们经常需要根据不同的状态或数据来展示不同的界面元素，这就是条件渲染。想象一下电商网站的购物车，当购物车为空时，我们会显示一个友好的提示信息，鼓励用户去购物；而当购物车中有商品时，则会显示商品列表、数量、价格等信息。这种根据条件动态切换显示内容的方式，就是条件渲染在实际项目中的典型应用。

React提供了多种方法来实现条件渲染，我们来一一了解。

1. 三元运算符

三元运算符是JavaScript中一个简洁的条件表达式，它可以根据条件的真假返回不同的值。在React中，我们可以利用它来决定渲染哪个组件或元素。

举个例子，假设我们有一个按钮，点击后会显示或隐藏一段文字。我们可以用一个状态变量isShow来控制文字的显示状态，然后使用三元运算符来决定是否渲染这段文字：

import React, { useState } from 'react';

function MyComponent() {
  const [isShow, setIsShow] = useState(false);

  const handleClick = () => {
    setIsShow(!isShow);
  };

  return (
    <div>
      <button onClick={handleClick}>显示/隐藏</button>
      {isShow ? <p>这是一段文字</p> : null}
    </div>
  );
}

export default MyComponent;

在这个例子中，当isShow为true时，会渲染这是一段文字；当isShow为false时，则渲染null，也就是什么都不渲染。

2. if语句

if语句是JavaScript中最基本的条件语句，它可以根据条件的真假执行不同的代码块。在React中，我们也可以用它来实现条件渲染。

还是以上面的例子为例，我们可以使用if语句来改写代码：

import React, { useState } from 'react';

function MyComponent() {
  const [isShow, setIsShow] = useState(false);

  const handleClick = () => {
    setIsShow(!isShow);
  };

  let textElement;
  if (isShow) {
    textElement = <p>这是一段文字</p>;
  }

  return (
    <div>
      <button onClick={handleClick}>显示/隐藏</button>
      {textElement}
    </div>
  );
}

export default MyComponent;

在这个例子中，我们先声明一个变量textElement，然后根据isShow的值来决定是否给它赋值。最后，我们将textElement渲染到页面上。

3. 逻辑与运算符（&&）

逻辑与运算符（&&）也可以用来实现条件渲染。当条件为真时，它会返回第二个操作数；当条件为假时，它会返回false。

我们可以用它来简化上面的例子：

import React, { useState } from 'react';

function MyComponent() {
  const [isShow, setIsShow] = useState(false);

  const handleClick = () => {
    setIsShow(!isShow);
  };

  return (
    <div>
      <button onClick={handleClick}>显示/隐藏</button>
      {isShow && <p>这是一段文字</p>}
    </div>
  );
}

export default MyComponent;

在这个例子中，当isShow为true时，isShow && 这是一段文字会返回这是一段文字；当isShow为false时，它会返回false，React会忽略false，什么都不渲染。

4. 条件渲染高阶组件

对于一些复杂的条件渲染逻辑，我们可以将其封装成一个高阶组件（HOC），以便在多个组件中复用。

例如，我们可以创建一个withLoading HOC，它会在数据加载完成之前显示一个加载指示器，加载完成后则显示传入的组件：

import React from 'react';

function withLoading(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = { isLoading: true };
    }

    componentDidMount() {
      // 模拟数据加载
      setTimeout(() => {
        this.setState({ isLoading: false });
      }, 2000);
    }

    render() {
      if (this.state.isLoading) {
        return <div>Loading...</div>;
      }
      return <WrappedComponent {...this.props} />;
    }
  };
}

export default withLoading;

然后，我们可以使用这个 HOC 来包装其他组件：

import React from 'react';
import withLoading from './withLoading';

function MyComponent() {
  return <div>数据加载完成！</div>;
}

const MyComponentWithLoading = withLoading(MyComponent);

export default MyComponentWithLoading;