React 条件渲染

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

做这件事有很多种方法。

`if`声明

我们可以使用ifJavaScript 运算符决定渲染哪个组件。

例子：

我们将使用这两个组件：

function MissedGoal() {
  return <h1>MISSED!</h1>;
}

function MadeGoal() {
  return <h1>Goal!</h1>;
}

例子：

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

function Goal(props) {
  const isGoal = props.isGoal;
  if (isGoal) {
    return <MadeGoal/>;
  }
  return <MissedGoal/>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={false} />);

运行示例 »

尝试改变isGoal归因于true:

例子：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={true} />);

运行示例 »

逻辑性`&&`运算符

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

例子：

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

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

const cars = ['Ford', 'BMW', 'Audi'];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage cars={cars} />);

运行示例 »

如果cars.length > 0等于 true，之后的表达式&&将渲染。

尝试清空cars数组：

例子：

const cars = [];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage cars={cars} />);

运行示例 »

三元运算符

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

condition ? true : false

我们将回到目标示例。

例子：

返回MadeGoal组件如果isGoal是true，否则返回MissedGoal成分：

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={false} />);

运行示例 »

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

通过练习测试一下

练习:

使用正确的逻辑运算符完成以下部分。

function App({isLoggedIn}) {
  return (
    <>
      <h1>My Application</h1>
      {isLoggedIn  <Profile /> }
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

开始练习

React 条件渲染

if声明

例子：

例子：

例子：

逻辑性&&运算符

例子：

例子：

三元运算符

例子：

通过练习测试一下

练习:

`if`声明

逻辑性`&&`运算符