React中的条件渲染

条件渲染很多时候都是在state里面设置变量，一般为布尔值，然后由这个布尔值来控制页面的隐藏与显示。常见的应用场景：

• 对视图的条件进行切换
• 做缺省值

Case1

父元素控制子元素的显示，通过改变className来进行改变，需要注意在className中添加多个类名的方法

import React from 'react';

//父元素控制子元素的显示
export default class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      isActive: true
    }
  }

  changeShow = () => {
    this.setState({
      isActive: !this.state.isActive
    })
  }

  render() {
    return (
      <div>
        <button onClick={this.changeShow}>控制子元素显示</button>
        <Child isActive={this.state.isActive} />
      </div>
    )
  }
}

class Child extends React.Component {

  render() {
    let strClass = null;
    if (this.props.isActive) {
      // 在这边设置空格
      strClass = ' active'
    } else {
      strClass = ""
    }
    return (
      <div className={"content" + strClass}>
        <h1>我是子元素</h1>
      </div>
    )
  }
}

Case2

import React from "react";

export default class IfDemo extends React.Component {
  /**
   * 常见的应用场景：
   * 1.对视图的条件进行切换
   * 2.做缺省值
   */

  constructor(props) {
    super(props);
    this.state = {
      isLogin: false,
      names: ["ime"],
    };
  }

  clickHandle = () => {
    this.setState({
      isLogin: true,
    });
  };
  
  render() {
    const { names } = this.state;
    let showView = this.state.isLogin ? <div>iwen</div> : <div>请登陆</div>;
    return (
      <div>
        条件渲染{showView}
        <button onClick={this.clickHandle}>登录</button>
        {names.length > 0 ? (
          <div>
            {names.map((element, index) => {
              return <p key={index}>{element}</p>;
            })}
          </div>
        ) : (
          <div>等待数据</div>
        )}
      </div>
    );
  }
}

Case3

import React, { Component } from 'react'

//函数组件
function UserGreet(props) {
  return <h1>欢迎登陆</h1>
}

function UserLogin(props) {
  return <h1>请先登陆</h1>
}

export default class App5 extends Component {

  constructor(props) {
    super(props)
    this.state = {
      isLogin: false
    }
  }

  render() {
    let element = null
    if (this.state.isLogin) {
      element = <UserGreet />
    } else {
      element = <UserLogin />
    }
    return (
      <div>
        <h1>这是头部</h1>
        {element}
        <h1>这是三元运算符</h1>
        {this.state.isLogin ? <UserGreet /> : <UserLogin />}
        <h1>这是尾部</h1>
      </div>
    )
  }
}

3种不同方式渲染组件

import React, { Component } from 'react'

function UserGreeting(props) {
  return (
    <p>欢迎{props.username}</p>
  )
}

function GuestGreeting(props) {
  return (
    <p>请登陆！</p>
  )
}

export default class Greeting extends Component {

  constructor(props) {
    super(props)
    this.state = {
      isLogin: true
    }
  }

  render() {
    let greeting = <GuestGreeting />
    if (this.state.isLogin) {
      greeting = <UserGreeting username="ha" />
    }
    return (
      <div>
        <h3>1.最基本的通过if实现的条件渲染</h3>
        {greeting}
        <h3>2.通过三元运算符实现条件渲染</h3>
        {this.state.isLogin ? <UserGreeting username="la" /> : <GuestGreeting />}
        <h3>3.通过&&实现条件渲染</h3>
        {
          this.state.isLogin && <UserGreeting username="he" />
        }
        {
          this.state.isLogin || <GuestGreeting />
        }
      </div>
    )
  }
}