列表渲染

示例

tsx

const users = [
  { id: 1, name: '张三', age: 18 },
  { id: 2, name: '李四', age: 19 },
  { id: 3, name: '王五', age: 20 },
]

const obj: Record<string, any> = {
  id: 1,
  name: '张三',
  age: 18,
}

function List() {
  return (
    <>
      {/* 数组 */}
      <ul>
        {users.map(item => (
          <li key={item.id}>
            {item.name} - {item.age}
          </li>
        ))}
      </ul>

      <hr />

      {/* 对象 */}
      <div>
        {Object.keys(obj).map(key => (
          <div key={key}>
            {key}: {obj[key]}
          </div>
        ))}
      </div>
    </>
  )
}

export default List

提示

Fragment 组件，用来渲染多个元素，但 Fragment 不会渲染为任何 HTML 元素。

jsx

function Blog() {
  return posts.map(post => (
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  ))
}

列表渲染 ​

示例 ​

列表渲染

示例