React 列表和key

阅读数:64 评论数:0

跳转到新版页面

分类

html/css/js

正文

基础列表组件

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

key帮助React识别哪些元素改变了, 比如被添加或删除.

key只是兄弟节点之间必须唯一, 不需要是全局唯一的.

用key提取组件

元素的key只有放在就近的数组上下文中才有意义, 比方说, 如果你提取出一个ListItem组件, 你应该把key保留在数组中的这个<ListItem />元素上, 而不是放在ListItem组件的<li>元素上.

unction ListItem(props) {
  const value = props.value;
  return (
    // 错误!你不需要在这里指定 key:
    <li key={value.toString()}>
      {value}
    </li>
  );
}
 
function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 错误!元素的 key 应该在这里指定:
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}
 
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);
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>
  );
}
 
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);



相关推荐

Redux DevTools 浏览器安装此插件,npm start之后,F12,点击Redux, 可跟踪Action以及state的变化。 React Deve

react原生动态添加多个className会报错: import style from './style.css'

Javascript单元测试框架对比 1. Jasmine 带有断言, spies(用来模拟函数的执行环境)和mocks. 2. AVA <

在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-

import defaultcomponent,{a,b,c...} from 'XXX'<br

包含关系 有些组件无法提前知晓它们子组件的具体内容. 在Sidebar和Dialog等展现通用容器的组件中特别容易遇到这种情况. 我们建议这些组件使用一个特殊的c

通常, 多个组件需要反映相同的变化数据, 这时我们建议将共享状态提升到最近的共同父组件中去. 示例:

受控组件 在HTML中, 表单元素之类的通常自己维护state, 并根据用户输入进行更新. 而在React中, 可变状态通常保存在组件的state属性中, 并且只能通过使用se

React中的条件渲染和Javascrip中的一样, 使用Javascrip运算符if或者条件运算符去创建元素来表现当前的状态, 然后让React根据它们来更新UI. <pre clas

(1)React事件的命名采用小驼峰式(camelCase), 而不是纯小写. (2)使用JSX语法时你需要传入一个函数作为事件处理函数, 而不是一个字符串. 传统的