react学习笔记7--列表和键

渲染复杂组件

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>{number}</li>
    );
    return (
        <ul>{listItems}</ul>
    );
}

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

当运行时会提示警告，缺少键

numbers.map((number) =>
        <li key={number.toString()}>{number}</li>
    );

键帮助react验证那个item改变、添加、删除，添加key的最好方式是在item的兄弟节点中用一个独一无二的字符串来验证一个list item，最常见的是用data的id作为键

const todoItems = todos.map((todo) =>
    <li key={todo.id}>
        {todo.text}
    </li>
);

如果没有稳定的ids作为keys，也可以使用index但是一般不推荐使用index

用keys提取组件

“`

function ListItem(props) {
return

• {props.value}
• ;
  }

  function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number)=>
  
  );

  return (
      <ul>{listItems}</ul>
      );
  

  }

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

  ReactDOM.render(
  ,
  document.getElementById(‘root’)
  );
  “`