React 基础学习---列表 key(八)

React

发布日期: 2019-11-30

更新日期: 2019-12-08

文章字数: 424

阅读时长: 1 分

阅读次数:

渲染多个组件

你可以通过使用{}在 JSX 内构建一个元素集合

我们使用 Javascript 中的 map()方法来遍历 numbers 数组.将数组中的每个元素变成 li 标签,最后我们将得到的数组赋值给 listItems

const numbers = [1, 2, 3, 4, 5]
const listItems = numbers.map(number => <li>{number}</li>)

我们把整个 listItems 插入到 ul 元素中去,然后渲染 DOM

ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('root'))

基础列表组件

渲染一个列表组件

const numbers = [1, 2, 3, 4, 5]
function NumberList(props) {
  const numbers = props.numbers
  const listItems = numbers.map(number => {
    ;<li key={number.toString()}>{number}</li>
  })
  return <ul>{listItems}</ul>
}
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
)

列表循环,必须要有 key 否则会报错,Key 值必须是独一无二的

key 只是兄弟节点之间必须唯一

数组元素中使用的 key 在其兄弟节点中应该是独一无二的,当我们生成两个不同的数组时候,我们可以使用相同的 key 值

function Blog(props) {
  //左边第一个组件
  const sidebar = (
    <ul>
      {props.posts.map(post => {
        ;<li key={post.id}>{post.title}</li>
      })}
    </ul>
  )
  //右边一个组件
  const content = props.posts.map(posts => {
    ;<div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  })
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  )
}
const posts = [
  { id: 1, title: 'Hello,world', content: 'Welcome to learning' },
  { id: 2, title: 'Hello,world', content: 'Welcome to learning' }
]
ReactDOM.render(<Blog posts={posts} />, document.getElementById('root'))

在 JSX 中嵌入 map()

function NumberList(props) {
  const numbers = props.numbers
  return (
    <ul>
      {numbers.map(number => {
        ;<ListItem key={number.toString()} />
      })}
    </ul>
  )
}