React 从零开始学习（十二）—— 条件渲染

在 React 中，没有特殊的语法来编写条件。因此，可以使用与编写常规 JavaScript 代码时相同的技术。

三目运算符 condition ? true : false

三目运算符应用实例：

import React from 'react'
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = { isLoggedIn: false };
  }

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

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

  render () {
    const isLoggedIn = this.state.isLoggedIn;
    return (
      <div>
        {isLoggedIn ? <button onClick={this.handleLogoutClick}>
          Hello,this is Logout
        </button> :
          <button onClick={this.handleLoginClick}>
            Hello,this is Login
          </button>
        }
      </div>
    );
  }
}
export default Example

在app.js中使用：

// import logo from './assets/images/logo.svg';
import './assets/css/App.css';
import Home from './components/Home'
import Example from './components/Example';

function App () {
  return (
    <div className="App">
      <header className="App-header">
        {/* <img src={logo} className="App-logo" alt="logo" /> */}
        <p>
          文字 <code>src/App.js</code> Hello World!.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          https://reactjs.org
        </a>
      </header>
      <Example />
      {/* <Game /> */}
    </div>
  );
}

export default App;

效果如下：

与运算符 &&

true && expression

通过花括号包裹代码在 JSX 中嵌入任何表达式 ，也包括 JavaScript 的逻辑与 &&，可以方便地条件渲染一个元素。

在 JavaScript 中，true && expression 总是会返回 expression, 而 false &&
expression 总是会返回 false。
因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

请注意，返回 false 的表达式会使 && 后面的元素被跳过，但会返回 false 表达式。

例子：

  render () {
    const count = 0
    return (
      <div>
        {count && <h1>Messages: {count}</h1>}
      </div>
    )
  }

页面效果如下图：

将count 改为 1：

  render () {
    const count = 1
    return (
      <div>
        {count && <h1>Messages: {count}</h1>}
      </div>
    )
  }

页面效果如下图：