React：显示列表

在 React 组件的显示里面，我们经常需要根据组件里的数据去显示一个组件的列表。可以使用数组的 map 方法得到一组列表，然后放在组件的显示里用一下。注意列表里的每个项目都应该有个 key 属性，并且每个项目的  key 属性的值都应该不一样。下面这个练习可以帮您理解在 React 组件里显示列表。

有个 Message 组件是这样的：

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

再改造一下 App 组件，先在组件的 State 里添加一组要显示的数据：

  state = {
    header: 'ninghao.net',
    show: false,
    messages: [
      { id: 0, text: 'hello ~'},
      { id: 1, text: 'hola ~'},
      { id: 3, text: '您好 ~'}
    ]
  }

上面我们添加了一个 messages ，它里面有一个 id 属性，还有个 text 属性，这个 messages 里的数据我打算用 Message 这个组件来显示。先去生成一个组件列表，在 App 组件的 render 方法里，用一下 map 方法：

const { messages } = this.state
const messageItems = messages.map(message => {
  return <Message key={ message.id } message={ message.text } />
})

先从 this.state 里把 messages 拿出来用一下，然后用一下 messages 的 map 方法，循环处理一下这组数据。每次循环的时候当前项目用 message 来表示，每次循环都返回一个 Message 组件。组件里添加了 key 属性，它的值是 message 里的 id ，每个 message 的 id 属性的值都不一样。又传递了一个 message 属性，对应的值是 message 里的 text 属性。我们把循环后的结果交给了 messageItems。

这样在 App 组件的 render 方法里的 return 里面，可以绑定输出这个 messageItems。现在点击界面上的 show 按钮，会显示一组 Message 组件。组件上用的数据来自 App 组件的 state 里的 messages 这个数据。

现在 App.js 是这样的：

import React, { Component } from 'react'

class Header extends Component {
  state = {
    emoji: '👪'
  }

  render () {
    return (
      <h2 onClick={ (event) => this.props.changeHeader(event, this.state.emoji) }>
        { this.props.header }
      </h2>
    )
  }
}

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

class App extends Component {
  state = {
    header: 'ninghao.net',
    show: false,
    messages: [
      { id: 0, text: 'hello ~'},
      { id: 1, text: 'hola ~'},
      { id: 3, text: '您好 ~'}
    ]
  }

  changeHeader = (event, emoji) => {
    this.setState({
      header: emoji
    })
    console.log(event, emoji)
  }

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

  render () {
    const { messages } = this.state
    const messageItems = messages.map(message => {
      return <Message key={ message.id } message={ message.text } />
    })

    console.log(messageItems)

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

export default App