react学习记录-渲染列表数据

渲染列表数据

在使用 React.js 处理列表数据的时候，需要掌握一些规则。

渲染存放 JSX 元素的数组

假设现在我们有这么一个用户列表数据，存放在一个数组当中：

const users = [
  {
    username: 'Jerry', age: 21, gender: 'male' },
  {
    username: 'Tomy', age: 22, gender: 'male' },
  {
    username: 'Lily', age: 19, gender: 'female' },
  {
    username: 'Lucy', age: 20, gender: 'female' }
]

如果现在要把这个数组里面的数据渲染页面上要怎么做？开始之前要补充一个知识。之前说过 JSX 的表达式插入 {} 里面可以放任何数据，如果我们往 {} 里面放一个存放 JSX 元素的数组会怎么样？

class Index extends Component {
   
  render () {
   
    return (
      <div>
        {
   [
          <span>React.js </span>,
          <span>is </span>,
          <span>good</span>
        ]}
      </div>
    )
  }
}

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

我们往 JSX 里面塞了一个数组，这个数组里面放了一些 JSX 元素（其实就是 JavaScript 对象）。到浏览器中，你在页面上会看到：

React.js帮我们把插入的表达式中的数组中的JSX元素一个个罗列出来，并渲染上去。可以说：如果你往 {} 放一个数组，React.js 会帮你把数组里面一个个元素罗列并且渲染出来。

使用 map 渲染列表数据

既然React帮我们做了罗列的工作，那么我们只需要为每条数据构建一个JSX，再放入数组当中，将数组插入render方法中的JSX里即可。看看下面的代码是怎么将原来的用户数组变成新的JSX元素数组的：

const users = [
  {
    username: 'Jerry', age: 21, gender: 'male' },
  {
    username: 'Tomy', age: 22, gender: 'male' }