React中文文档 8. 列表 & Key

1.遍历

const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) =>
  <li>{number}</li>
);

ReactDOM.createRoot(document.getElementById('root')).render(<ul>{listItems}</ul>);

2.基础列表组件

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

const numbers = [1, 2, 3, 4, 5];

ReactDOM.createRoot(document.getElementById('root')).render(<NumberList numbers={numbers}/>);

运行上记代码时，会发生下面的错误

意思是当你创建一个元素时，必须包括一个特殊的 key 属性