如何使用 JavaScript 的 map() 从数组中渲染组件？

const people = [
  'Creola Katherine Johnson: mathematician',
  'Mario José Molina-Pasquel Henríquez: chemist',
  'Mohammad Abdus Salam: physicist',
  'Percy Lavon Julian: chemist',
  'Subrahmanyan Chandrasekhar: astrophysicist'
];

export default function List() {
  const listItems = people.map(person =>
    <li>{person}</li>
  );
  return <ul>{listItems}</ul>;
}

如何使用 JavaScript 的 filter() 只渲染特定组件？

const chemists = people.filter(person =>
    person.profession === 'chemist'
 );
 

箭头函数

箭头函数在 `=>` 之后隐式返回表达式，因此你不需要 `return` 语句：

const listItems = chemists.map(person =>  
    <li>...</li> // Implicit return!  
);

但是，如果 `=>` 后跟 `{` 大括号，则必须显式写入 `return`！

const listItems = chemists.map(person => { // Curly brace  
    return <li>...</li>;  
});

key很重要

和vue的v-for key作为循环的唯一标识，不能缺少！！