React 条件渲染学习笔记

React 中的条件渲染是指根据不同的条件渲染不同的组件或者内容，常见的条件渲染方式有：

• 通过 if/else 实现条件渲染
• 通过数组中的元素来进行条件渲染
• 通过三元操作符实现条件渲染

通过 if/else 实现条件渲染

可以使用 if/else 语句在组件中实现条件渲染，具体实现方式如下：

jsxCopy Code
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

在上面的代码中，我们通过判断 isLoggedIn 变量的值，来实现不同的渲染。

通过数组中的元素来进行条件渲染

另一种实现条件渲染的方式是将组件用数组来表示，然后根据条件筛选要渲染的组件，具体实现如下：

jsxCopy Code
function App(props) {
  const isLoggedIn = props.isLoggedIn;
  const greeting = isLoggedIn ? 'Welcome back!' : 'Please sign up.';
  const greetingElem = <h1>{greeting}</h1>;
  const loginButtonElem = <button>Login</button>;
  const logoutButtonElem = <button>Logout</button>;

  return [
    greetingElem,
    isLoggedIn ? logoutButtonElem : loginButtonElem,
  ];
}

在上面的代码中，我们将需要渲染的组件都放在了一个数组中，然后根据 isLoggedIn 的值来选择渲染哪些元素。

通过三元操作符实现条件渲染

还可以使用三元操作符来进行条件渲染，具体实现如下：

jsxCopy Code
function App(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <button>Logout</button>
      ) : (
        <button>Login</button>
      )}
    </div>
  );
}

在上面的代码中，我们使用了三元操作符根据 isLoggedIn 的值来渲染不同的按钮。

以上是 React 中实现条件渲染的一些常见方式，开发者可以根据项目需求进行选择和实现。