条件渲染

阅读2239

更新时间2025-08-20

事件

列表

在 React 中，您可以有条件地渲染组件。

有几种方法可以做到这一点。

`if` 语句

我们可以使用 if JavaScript 操作符来决定渲染哪个组件。

实例:

我们将使用这两个组件:

function MissedGoal() {
  return MISSED!;
}

function MadeGoal() {
  return Goal!;
}

实例:

现在，我们将创建另一个组件，根据条件选择要渲染的组件:

function Goal(props) {
  const isGoal = props.isGoal;
  if (isGoal) {
    return ;
  }
  return ;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

运行实例 »

尝试将 isGoal 属性更改为 true:

实例:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

运行实例 »

逻辑`&&`运算符

另一种有条件地渲染 React 组件的方法是使用 && 运算符。

实例:

我们可以使用花括号在 JSX 中嵌入 JavaScript 表达式:

function Garage(props) {
  const cars = props.cars;
  return (
    <>
      Garage
      {cars.length > 0 &&
        
          You have {cars.length} cars in your garage.
        
      }
    
  );
}

const cars = ['Ford', 'BMW', 'Audi'];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

运行实例 »

如果 cars.length 等于 true，则将呈现 && 之后的表达式。

尝试清空 cars 数组:

实例:

const cars = [];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

运行实例 »

三元运算符

另一种有条件地渲染元素的方法是使用三元运算符。

condition ? true : false

我们将回到目标示例。

实例:

如果isGoal是true，则返回MadeGoal组件，否则返回MissedGoal组件:

function Goal(props) {
  const isGoal = props.isGoal;
  return (
    <>
      { isGoal ?  :  }
    
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

运行实例 »

要了解更多信息，请参阅三元运算符部分。