react随笔6 条件渲染

条件渲染

在React中你可以创建不同的组件封装需要的行为，然后可以根据应用的状态变化只渲染其中的一部分组件。
React中的条件渲染和JavaScript中的一致，可以使用if或者条件运算符来创建表示当前状态的元素，然后让ReactDOM来渲染。
有如下两个组件：

function UserGreeting(props) {
  return <h1>Welcome back!</h1>
}
function GuestGreeting(props) {
  return <h1>Please sign in!</h1>
}

两个组件，分别表示登录用户的展示信息和未登录用户的展示信息。
所以我们可以根据登录状态，返回不同的组件，让不同登录态的人看到不同的信息。

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />
  }
  return <GuestGreeting />
}
ReactDOM.render(
  <Greeting />, document.getElementById('root')
);

这里就根据是否登录isLoggedIn来分别返回UserGreeting或者GuestGreeting组件。这里的代码并没有设置Greeting的isLoggedIn属性，所以默认值是false，当然也可以在渲染的时候设置他的是:

ReactDOM.render(
  <Greeting isLoggedIn={true} />, document.getElementById('root')
);

元素变量

元素变量，就是可以在组件内部定义变量，变量的内容就是一个React元素。下面的例子进行演示：

• 在页面上定义两个按钮，一个是登录按钮，一个是登出按钮
• 定义一个登录控制组件，根据登录态展示不同的按钮
• 同时也渲染上边的欢迎词提示

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

如上定义了两个按钮，根据props对象定义了按钮的点击事件。
下面在定义一个LoginControl组件，会根据状态渲染不同的按钮，在这个组件内部，我们就可以看到定义了button变量，该变量的值就是直接用React元素进行赋值。

class LoginControl extends React.Component{
  constructor(props) {
    super(props);
    this.handleLogin = this.handleLogin.bind(this);
    this.handleLogout = this.handleLogout.bind(this);
    this.state ={isLoggedIn: true};
  }
  handleLogin() {
    this.setState({isLoggedIn: true});
  }
  handleLogout() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button = null;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogout} />
    } else {
      button = <LoginButton onClick={this.handleLogin} />
    }
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}
ReactDOM.render(
  <LoginControl />, document.getElementById('root')
);

除了声明变量，使用if条件表达式来判断，还可以使用逻辑与运算符。
*** 与运算符&&
我们知道React中的JSX支持任何表达式，这当然也包括逻辑运算表达式。这样也可以方便的渲染一个元素。如下：

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')
);

注意MailBox返回元素的时候，使用了JSX语法，大括号{}中的表达式，左侧是条件表达式，返回值为true或者false。&& 右侧是需要渲染的元素。
之所以能这样做，是因为在JavaScript中，true && expression总是返回expression，而false && expression总是返回false；因此，如果条件表达式返回值是true，&&右侧的元素就会被渲染，如果条件表达式返回的值是false，&&右侧的元素不会被渲染，React会跳过并忽略它。

三目运算符

条件渲染的另一种方式，是使用三目运算符：condition ? element1 : element2
如下边的代码：

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

阻止组件渲染

如果在某些情况下，需要隐藏某些组件，即使这些组件被其他组件渲染。那么就可以让该组件的render方法返回null即可。
如下边的代码，根据属性warn的值来判断是否需要隐藏。如果warn的值是false，则进行隐藏，不会渲染。

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }
  return <div className="warning">Warning!</div>
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true}; 
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }
  handleToggleClick() {
    this.setState(preState => ({
      showWarning: !preState.showWarning
    }));
  }
  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick} >{this.state.showWarning ? 'Hide' : 'Show'}</button>
      </div>
    );
  }
}
ReactDOM.render(
  <Page />, document.getElementById('root')
);

需要注意的是，组件的render方法返回null，并不会影响组件的生命周期方法的回调。例如componentWillUpdate和componentDidUpdate依然可以被调用。