react 基础列表组件

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

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  ,
  document.getElementById('root')
);

当我们运行这段代码，将会看到一个警告 a key should be provided for list items ,意思是当你创建一个元素时，必须包括一个特殊的 key 属性。我们将在下一节讨论这是为什么。

让我们来给每个列表元素分配一个 key 来解决上面的那个警告：

 

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

      {number}
    
  );
  return (
    
{listItems}
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  ,
  document.getElementById('root')
);

Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。

当元素没有确定的id时，你可以使用他的序列号索引index作为key 

 

 

 

用keys提取组件

function ListItem(props) {
  // 对啦！这里不需要指定key:
  return 
{props.value}
;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 又对啦！key应该在数组的上下文中被指定
    
  );
  return (
    

      {listItems}
    
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  ,
  document.getElementById('root')
);

 定义到组件上 而不是定义在li上

 

当我们生成两个不同的数组时，我们可以使用相同的键

 

 

function Blog(props) {
  const sidebar = (
    

      {props.posts.map((post) =>
        

          {post.title}
        
      )}
    
  );
  const content = props.posts.map((post) =>
    

      
{post.title}
      
{post.content}
    
  );
  return (
    

      {sidebar}
      

      {content}
    
  );
}

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
  ,
  document.getElementById('root')
);

 

 

上面例子中，Post组件可以读出props.id，但是不能读出props.key