7、ReactJs基础知识07--列表渲染 & Key

思路：使用map函数将数组转化成列表，map函数是返回一个新的数组，并不会改变原来的数组

并且react在渲染数组时，会将元素拼接进行渲染，所以会将数组展开渲染

1、通过使用 {} 在 JSX 内构建一个元素集合。

      const numbers = [1, 2, 3, 4, 5];
      const listItems = numbers.map((number,index) =>
        <li key={index}>{number}</li>
      );

2、基础组件列表

key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。

key设置的位置：在 map() 方法中的元素需要设置 key 属性。

    function NumberList(props) {
        const numbers = props.numbers;
        const listItems = numbers.map((number,index) =>
          <li key={index}>{number}</li>
        );
        return (
          <ul>{listItems}</ul>
        );
      }

key 只是在兄弟节点之间必须唯一

key 会传递信息给 React ，但不会传递给你的组件。如果你的组件中需要使用 key 属性的值，请用其他属性名显式传递这个值

3、在 JSX 中嵌入 map(),即在{}中使用map表达式

    ReactDOM.render(
        {data.map((post) =>
          <li key={post}>
            {post}
          </li>
        )},
        document.getElementById('root')
      );

 

 

来源：https://www.cnblogs.com/gopark/p/12292564.html