React：条件显示

有些东西在组件里你可能希望在特定条件下显示或者隐藏，或者要根据条件显示特定的内容。下面的练习可以帮你理解按条件显示。

src/components/App.js

先在 App.js 里添加一个新的组件，这个组件只负责显示，所以可以直接使用一个函数类型的组件。

const Message = (props) => {
  return <div>{ props.message }</div>
}

上面定义了一个叫 Message 的组件，函数类型的组件可以接受一个 props 参数，它就是从爸爸那里传递过来的属性。组件里面用了一组 <div> 标签，里面包装显示了属性里的 message 这个属性的值。

再去改造一下 App 这个组件：

class App extends Component {
  state = {
    header: 'ninghao.net',
    message: 'SHOW MESSAGE!',
    show: false
  }

  handleClick = () => {
    this.setState({
      show: !this.state.show
    })
  }

  render () {
    return (
      <div>
        <Header changeHeader={ this.changeHeader } header={ this.state.header } />
        <button onClick={ this.handleClick }>
          { this.state.show ? 'Hide': 'Show' }
        </button>
        { this.state.show &&
          <Message message={ this.state.message } />
        }
      </div>
    )
  }
}

在组件里我们又添加了两个 State，一个叫 message，它是要显示的信息，还有一个叫 show，可以用它的值来判断是否要显示某些东西。

在组件的显示面面，我们添加了一个 button 元素，点击这个元素会执行组件的 handleClick 事件处理，这个 handleClick 做的事就是去把组件的 state 里的 show 的值设置成跟当前的值相反的值。也就是如果当前 show 的值是 true，点击这个 button 会把 show 设置成 false。

这个 button 元素上要显示的文字会根据 show 的值来显示：

{ this.state.show ? 'Hide': 'Show' }

如果 show  的值是 false，那按钮上的文字就是 Show，如果是 true，按钮上的文字就是 Hide 。

App 组件的显示里用了一下之前定义的 Message 组件，这个组件会根据 App 组件的 show 这个 state 的值来显示。

{ this.state.show &&
  <Message message={ this.state.message } />
}

this.state.show && ，如果 state 里的 show 的值是 true，就会显示 Message 这个组件的内容。