react 列表&key

列表&key

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);

渲染多个组件

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

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

基础列表组件

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

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={
    
    numbers} />,
  document.getElementById('root')
);

key

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

用 key 提取组件

// An highlighted block
var foo = 'bar';function ListItem(props) {
    
    
  // 正确！这里不需要指定 key：
  return <li>{
    
    props.value}</li>;
}

function NumberList(props) {
    
    
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 正确！key 应该在数组的上下文中被指定
    <ListItem key={
    
    number.toString()} value={
    
    number} />
  );
  return (
    <ul>
      {
    
    listItems}
    </ul>
  );
}

一个好的经验法则是：在 map() 方法中的元素需要设置 key 属性。

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

在 JSX 中嵌入 map()

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