React 条件渲染

在React中，我们可以使用条件渲染来根据不同的条件来决定显示不同的组件。

条件渲染有以下几种方式：

• 三元表达式
• &&运算符
• switch语句

最常用的方法是使用三元表达式。三元表达式是一种条件语句，它有三个部分：

• 条件
• 如果条件为真，则执行的语句
• 如果条件为假，则执行的语句

例如，我们可以使用三元表达式来实现一个简单的条件渲染：

const isLoggedIn = true;

const Greeting = () => {
  return isLoggedIn ? <p>欢迎您，尊敬的用户！</p> : <p>请登录</p>;
};

ReactDOM.render(<Greeting />, document.getElementById('root'));

在这个例子中，我们使用isLoggedIn变量来决定显示哪一个组件。如果isLoggedIn为真，则显示<p>欢迎您，尊敬的用户！</p>组件，否则显示<p>请登录</p>组件。

我们也可以使用&&运算符来实现条件渲染。&&运算符是一种逻辑运算符，它有以下规则：

• 如果两个操作数都为真，则返回第一个操作数
• 如果其中一个操作数为假，则返回第二个操作数

例如，我们可以使用&&运算符来实现一个简单的条件渲染：

const isLoggedIn = true;

const Greeting = () => {
  return isLoggedIn && <p>欢迎您，尊敬的用户！</p>;
};

ReactDOM.render(<Greeting />, document.getElementById('root'));

在这个例子中，我们使用isLoggedIn变量来决定是否显示<p>欢迎您，尊敬的用户！</p>组件。如果isLoggedIn为真，则显示该组件，否则不显示。

除了三元表达式和&&运算符之外，我们还可以使用switch语句来实现条件渲染。switch语句是一种选择语句，它有以下语法：

switch (expression) {
  case value1:
    // 语句
    break;
  case value2:
    // 语句
    break;
  default:
    // 语句
    break;
}

例如，我们可以使用switch语句来实现一个简单的条件渲染：

const isLoggedIn = true;

const Greeting = () => {
  switch (isLoggedIn) {
    case true:
      return <p>欢迎您，尊敬的用户！</p>;
    default:
      return <p>请登录</p>;
  }
};

ReactDOM.render(<Greeting />, document.getElementById('root'));

在这个例子中，我们使用isLoggedIn变量来决定显示哪一个组件。如果isLoggedIn为真，则显示<p>欢迎您，尊敬的用户！</p>组件，否则显示<p>请登录</p>组件。

条件渲染是一种非常有用的技术，它可以让我们在React中创建更复杂的和动态的UI。