React中文文档 7. 条件渲染

 1.条件渲染

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Greeting isLoggedIn={false}/>);

2. 条件渲染 元素变量

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

function LoginButton(props) {
  // console.log(props.onClick)
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  // console.log(props.onClick)
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态
    this.state = {isLoggedIn: false};
  }

  handleLoginClick=()=> {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick=()=> {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />; // props{ onClick : this.handleLoginClick } 传入
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}
ReactDOM.createRoot(document.getElementById('root')).render(<LoginControl/>);

3.三目运算符

function Sanmu1(props){
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<Sanmu1 isLoggedIn={true}/>);

 

4.三目运算符进阶 

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

// 对比7.1
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return isLoggedIn ? <UserGreeting /> : <GuestGreeting />;
}

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

class Sanmu2 extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态
    this.state = {isLoggedIn : props.isLoggedIn};
  }

  handleLoginClick=()=> {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick=()=> {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {isLoggedIn
          ? <LogoutButton onClick={this.handleLogoutClick} />
          : <LoginButton onClick={this.handleLoginClick} />
        }
      </div>
    );
  }
}
ReactDOM.createRoot(document.getElementById('root')).render(<Sanmu2 isLoggedIn={true}/>);

5.与运算符 &&

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
  // if (unreadMessages.length > 0){
  //   return (
  //     <div>
  //       <h1>Hello!</h1>
  //       <h2>
  //         You have {unreadMessages.length} unread messages.
  //       </h2>
  //     </div>
  //   )
  // }
  // else return (
  //   <div>
  //     <h1>Hello!</h1>
  //   </div>
  // )
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.createRoot(document.getElementById('root')).render(<Mailbox unreadMessages={messages}/>);