Skip to content
已经学习

React 5/n - 条件/列表渲染

条件渲染

  • 在 React 中,你可以通过使用 JavaScript 的 if 语句、&&? : 运算符来选择性地渲染 JSX
  • 选择性地返回 null。在一些情况下,你不想有任何东西进行渲染,可以直接返回 null。

    实际上,在组件里返回 null 并不常见,因为这样会让想使用它的开发者感觉奇怪。通常情况下,你可以在父组件里选择是否要渲染该组件。

  • 在 React 里,标签也是你代码中的一部分,所以你可以使用变量和函数来整理一些复杂的表达式。
  • 当 JavaScript && 表达式 的左侧(我们的条件)为 true 时,它则返回其右侧的值(在我们的例子里是勾选符号)。但条件的结果是 false,则整个表达式会变成 false。在 JSX 里,React 会将 false 视为一个“空值”,就像 null 或者 undefined,这样 React 就不会在这里进行任何渲染。
  • 使用 let 进行重复赋值

列表渲染

在 React 中使用 filter() 筛选需要渲染的组件和使用 map() 把数组转换成组件数组。

const listItems = people.map(person => <li key={idXXX}>{person}</li>);
const chemists = people.filter(person =>
person.profession === '化学家'
);

一个精心选择的 key 值所能提供的信息远远不止于这个元素在数组中的位置。即使元素的位置在渲染的过程中发生了改变,它提供的 key 值也能让 React 在整个生命周期中一直认得它

有一点需要注意,组件不会把 key 当作 props 的一部分。Key 的存在只对 React 本身起到提示作用。如果你的组件需要一个 ID,那么请把它作为一个单独的 prop 传给组件: <Profile key={id} userId={id} />

网站当前构建日期: 2025.02.16