子卿全栈系列💯

Appearance

🔠
📤
🕵️
📈0️⃣

React 条件渲染 ​

在 React 中，条件渲染是一种常见的需求。根据不同的条件，我们可能需要渲染不同的组件或者元素。React 提供了多种方式来实现条件渲染，包括 JavaScript 的 if/else 语句、三元运算符以及逻辑与运算符&&等。

React 条件渲染 ​

1. 使用 JavaScript 的 if/else 语句 ​

我们可以在 render 方法中使用 if/else 语句来根据条件返回不同的组件或元素。例如：

javascript
// 案例: 1. IF 判断
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>欢迎回来!</h1>;
  }
  return <h1>请先注册。</h1>;
}
ReactDOM.render(
  <Greeting isLoggedIn={true} />,
  document.getElementById("app1")
);
ReactDOM.render(
  <Greeting isLoggedIn={false} />,
  document.getElementById("app2")
);

2. 使用三元运算符 ​

三元运算符是另一种实现条件渲染的方式。它的语法是 condition ? true : false。例如：

javascript
// 案例: 2. 三元运算
function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      {unreadMessages.length > 0 ? (
        <h2>Hello! 您有 {unreadMessages.length} 条未读信息。</h2>
      ) : null}
    </div>
  );
}
ReactDOM.render(
  <Mailbox unreadMessages={[{ msg: "hello" }, { msg: "world" }]} />,
  document.getElementById("app2")
);

3. 使用逻辑与运算符&& ​

逻辑与运算符&&也可以用于条件渲染。当&&前面的表达式为 true 时，才会渲染&&后面的元素。例如：

javascript
// 案例: 3. 逻辑与运算符
function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      {unreadMessages.length > 0 && (
        <h2>Hello! 您有 {unreadMessages.length} 条未读信息。</h2>
      )}
    </div>
  );
}
ReactDOM.render(
  <Mailbox unreadMessages={[{ msg: "hello" }, { msg: "world" }]} />,
  document.getElementById("app3")
);

4. 阻止组件渲染 ​

在某些情况下，我们可能希望隐藏某个组件，即使它被其他组件渲染。这时，可以让 render 方法返回 null。例如：

javascript
// 案例: 4. 阻止组件渲染
function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }
  return <div className="warning">警告！</div>;
}
ReactDOM.render(<WarningBanner warn={true} />, document.getElementById("app3"));

以上就是 React 中实现条件渲染的几种常见方式。

代码与演示 ​

1. 全部代码 ​

点击查看代码
html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test-react-jsx</title>
    <!-- <script src="https://cdn.staticfile.org/react/18.0.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/18.0.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> -->
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./babel.js"></script>
  </head>

  <body>
    <div id="app1-true"></div>
    <div id="app1-false"></div>
    <div id="app2"></div>
    <div id="app3"></div>
    <div id="app4"></div>
    <div id="app5"></div>

    <script type="text/babel">
      (function () {
        // 案例: 1. IF 判断
        function Greeting(props) {
          const isLoggedIn = props.isLoggedIn;
          if (isLoggedIn) {
            return <h2>欢迎回来!</h2>;
          }
          return <h2>请先注册。</h2>;
        }
        ReactDOM.render(
          <Greeting isLoggedIn={true} />,
          document.getElementById("app1-true")
        );
        ReactDOM.render(
          <Greeting isLoggedIn={false} />,
          document.getElementById("app1-false")
        );
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 2. 三元运算
        function Mailbox(props) {
          const unreadMessages = props.unreadMessages;
          return (
            <div>
              {unreadMessages.length > 0 ? (
                <h2>Hello! 您有 {unreadMessages.length} 条未读信息。</h2>
              ) : null}
            </div>
          );
        }
        ReactDOM.render(
          <Mailbox unreadMessages={[{ msg: "hello" }, { msg: "world" }]} />,
          document.getElementById("app2")
        );
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 3. 逻辑与运算符
        function Mailbox(props) {
          const unreadMessages = props.unreadMessages;
          return (
            <div>
              {unreadMessages.length > 0 && (
                <h2>Hello! 您有 {unreadMessages.length} 条未读信息。</h2>
              )}
            </div>
          );
        }
        ReactDOM.render(
          <Mailbox unreadMessages={[{ msg: "hello" }, { msg: "world" }]} />,
          document.getElementById("app3")
        );
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 4. 阻止组件渲染
        function WarningBanner(props) {
          if (!props.warn) {
            return null;
          }
          return <div className="warning">警告！</div>;
        }
        ReactDOM.render(
          <WarningBanner warn={true} />,
          document.getElementById("app3")
        );
      })();
    </script>
  </body>
</html>

2. 案例演示 ​




test-react-if.html 资源加载中...