【前端知识】React 基础巩固(十二)——条件渲染

React 基础巩固(十二)——条件渲染

条件渲染

• 在 React 中，所有的条件判断都和普通的 JavaScript 代码一致
• 常见的条件渲染的方式有哪些？
  • 条件判断语句
  • 三元运算符
  • 逻辑与运算符

<script type="text/babel">
  // 1.创建root
  const root = ReactDOM.createRoot(document.querySelector("#root"));

  // 2.封装App组件
  class App extends React.Component {
    // 组件数据
    constructor() {
      super();
      this.state = {
        message: "hello world",
        isReady: false,
        friend: {
          name: "outman",
          desc: "test message",
        },
      };
    }

    // 渲染内容
    render() {
      const { isReady, friend } = this.state;

      {
        /* 1.条件判断方式一： 使用if进行条件判断 */
      }
      let showElement = null;
      if (isReady) {
        showElement = <h2>开始</h2>;
      } else {
        showElement = <h2>准备</h2>;
      }

      return (
        <div>
          {/* 1.方式一： 根据条件给变量赋值不同的内容 */}
          <div>{showElement}</div>

          {/* 2.方式二： 三元运算符 */}
          <div>{isReady ? <button>开始</button> : <h3>准备</h3>}</div>

          {/* 3.方式三： 逻辑与运算符 (场景：当某个值有可能为undefined时，使用&&进行条件判断)*/}
          <div>{friend && <div>{friend.name + " " + friend.desc}</div>}</div>
        </div>
      );
    }
  }

  // 3.渲染组件
  root.render(<App />);
script>

条件渲染基础案例

<script type="text/babel">
  // 1.创建root
  const root = ReactDOM.createRoot(document.querySelector("#root"));

  // 2.封装App组件
  class App extends React.Component {
    // 组件数据
    constructor() {
      super();
      this.state = {
        message: "hello world",
        isShow: true,
      };
    }

    changeShow() {
      this.setState({
        isShow: !this.state.isShow,
      });
    }

    // 渲染内容
    render() {
      const { message, isShow } = this.state;

      return (
        <div>
          <button onClick={() => this.changeShow()}>显示/隐藏</button>
          {isShow && <h2>{message}</h2>}

          {/* v-show的效果 */}
          <h2 style={{ display: isShow ? "block" : "none" }}>{message}</h2>
        </div>
      );
    }
  }

  // 3.渲染组件
  root.render(<App />);
script>