React条件渲染,列表渲染React条件渲染 React条件渲染案例 React列表渲染 React中实现v-show

React条件渲染

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React条件渲染</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      /**条件渲染的方式
       * 1.条件判断语句
       * 2.三元运算符
       * 3.与运算符&&
       */

      // 定义App根组件
      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            flag: false,
            ikun: {
              name: "kunkun",
              age: 18,
            },
          };
        }
        render() {
          const { flag, ikun } = this.state;
          //   条件判断方式：使用if
          let ele = null;
          if (flag) {
            ele = <h2>start game</h2>;
          } else {
            ele = <h2>plase ready!</h2>;
          }
          return (
            <div>
              {/* 1.根据条件给 变量 赋值不同的内容 */}
              <h2>{ele}</h2>
              {/* 2.三元运算符 */}
              <h2>{flag ? <button>start game 6</button> : <button>plase ready 6</button>}</h2>
              {/* 3.&&逻辑与运算符 */}
              {/* 使用场景：when value(array/object) is undefined or null,use &&  */}
              <h2>{ikun && <div>{ikun.name + " " + ikun.age}</div>}</h2>
            </div>
          );
        }
      }
      // 2.创建root并且渲染App组件
      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(<App />);
    </script>
  </body>
</html>

React条件渲染案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React条件渲染案例</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      // 定义App根组件
      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            msg: "hello zm",
            flag: true,
          };
        }
        changeShow() {
          this.setState({
            flag: !this.state.flag,
          });
        }
        render() {
          const { msg, flag } = this.state;
          return (
            <div>
              {flag && <h2>{msg}</h2>}
              <button onClick={() => this.changeShow()}>change</button>

              {/* v-show效果 */}
              {/* style第一个{}表示是js，第二个{}是对象 */}
              <h2 style={{ display: flag ? "block" : "none" }}>zm</h2>
            </div>
          );
        }
      }
      // 2.创建root并且渲染App组件
      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(<App />);
    </script>
  </body>
</html>

React列表渲染

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React列表渲染</title>
    <style>
      .list {
        width: 200px;
        height: 200px;
      }
      .item {
        width: 100%;
        height: 100%;
        color: rgb(169, 219, 169);
        border-radius: 12px;
        border: 1px solid paleturquoise;
        margin: 5px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      // 定义App根组件
      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            person: [
              { id: 1, name: "zm", age: 18 },
              { id: 2, name: "dh", age: 19 },
              { id: 3, name: "ww", age: 20 },
              { id: 4, name: "hs", age: 21 },
            ],
          };
        }
        render() {
          const { person } = this.state;
          return (
            <div>
              <h2>jsx列表渲染</h2>
              <div className="list">
                {person
                  .filter((item) => item.age > 18)
                  .slice(0, 2)
                  .map((item) => {
                    return (
                      <div className="item" key={item.id}>
                        <h2>id:{item.id}</h2>
                        <h2>name:{item.name}</h2>
                        <h2>age:{item.age}</h2>
                      </div>
                    );
                  })}
              </div>
            </div>
          );
        }
      }
      // 2.创建root并且渲染App组件
      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(<App />);
    </script>
  </body>
</html>