React学习：条件渲染

React 中的条件渲染就和在 JavaScript 中的条件语句一样。通过 JavaScript 条件操作符(如 if ) 根据不同的条件来决定创建渲染不同的元素，并且让 React 更新匹配的 UI 。

仔细阅读代码，你会发现这一章对你收获最大的是怎么让代码写的更简单优雅。

一、怎么用

看下面dome就懂了,顺便看看我们在多个页面写react 与在一个页面写react的区别

例：多个页面

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

App.js

import React, { Component } from 'react';
import Greeting from './Greeting';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      isLoggedIn:false
    };
  }
  handle = () => {
    this.setState(prevState => ({
      isLoggedIn: !prevState.isLoggedIn
    }));
  }
  render(){  
    let isLoggedIn = this.state.isLoggedIn;
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} name={'bty'}/>
        <button onClick={this.handle}>
          {isLoggedIn ? '退出登录' : '登录'}
        </button>
      </div>
    );
  }
}

export default App;

Greeting.js

import React, {Component} from 'react';

class Greeting extends Component{
    render(){
        let isLoggedIn = this.props.isLoggedIn;
        return (
            <div>
                {isLoggedIn ? 
                    ('welcome you ,' + this.props.name + '!' )
                    :'please login!'
                }
            </div>
        );
    }
}
export default Greeting;

执行效果：
这里写图片描述
点击“登陆”后（再点击“退出登录”又回到上面图的样子）

例：一个页面

这是官网上的例子，但是仔细阅读代码你会发现里面代码太废话，完全可以像上面一样简化代码，写的更优雅。

class LoginControl 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;

    let button = null;
    /*  实际这么写太废话了，不如看看我上面自己写的，
      代码简化了很多
    */
    //不同的条件，渲染不同的组件
    if (isLoggedIn) {
      //用变量来存储react元素
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

function UserGreeting(props) {
  return <h1>welcome you ,{props.name}</h1>;
}

function GuestGreeting(props) {
  return <h1>please login!</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting name={'bty'}/>;
  }
  return <GuestGreeting />;
}

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

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

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

执行效果：同上

二、内联 if 用法

1、boolean && expression

我们可以在JSX中嵌入任何表达式，方法是将表达式包裹在 {} 中。

下面表达式可以正常运行，是因为在 JS 中， true && expression 总是会评估为 expression ，而 false && expression 总是执行为 false 。
因此，如果条件为 true ，则 && 后面的元素将显示在输出中。如果是 false，React 将会忽略并跳过它。

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

输出：
Hello!
You have 3 unread messages.

注意：

0 && expression ，expression仍然会被渲染。例如，这段代码不会按照你预期的发生，因为当 props.messages 是一个空数组时 0 会被打印：

<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

要修复这个问题，确保 && 之前的表达式总是布尔值：

<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>

2、condition ? true : false

使用 JavaScript 的条件操作符 condition ? true : false

小技巧：可以这些写，来简化代码
let boolean = true; let a = !boolean;
效果等价于 let boolean = true; let a = boolean ？false : true;

在下面这个例子中，我们使用它来进行条件渲染一个小的文本块：

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

它也可以用于更大的表达式，虽然不太明显发生了什么：

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

三、防止组件渲染

有时，你可能希望隐藏某个组件，即使它是由另一个组件渲染的。
为此，我们可以return null，而不是其渲染输出。

从组件的 render 方法返回 null 不会影响组件生命周期方法的触发。例如， componentWillUpdate 和 componentDidUpdate 仍将被调用。

在下面的例子中，根据名为warn的 prop 值，呈现 < WarningBanner/> 。如果 prop 值为 false ，则该组件不渲染：

function Warning(props){
      let warn = props.warn 
                        ? 
                  <div className='warning'>Warning!</div>
                        :
                  null;
      return warn;
}

class Page extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      showWarning:true
    };
  }
  handle = () => {
    this.setState(prevState => ({
      showWarning:!prevState.showWarning
    }));
  }
  render(){
    let showWarning = this.state.showWarning;
    return(
      <div>
        <Warning warn={showWarning} />
        <button onClick={this.handle}>
          {showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }  
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);

/* css */
.warning {
  background-color: red;
  text-align: center;
  width: 100%;
  padding: 10px;
  color: white;
}

输出结果：
这里写图片描述
点击Hide后

再点击show又回到第一张图