Question

headTags是一个没有定义任何键的React元素数组。我能够在没有警告的情况下使用以下JSX进行渲染。

return (
  <head>
    {React.Children.toArray(headTags)}
  </head>
);

在React 16中是否有一些可能的方法来处理片段？我收到一条警告：使用此元素时，每个子元素都需要key：

return (
  <head>
    <React.Fragment>
      {headTags}
    </React.Fragment>
  </head>
);

Answer 1

根据github问题中的this answer，您可以。

在React.Fragment或使用React.createElement

的任何元素中，使它们与子代一样，呈现无键的项目数组

问题： itemsArray是一个数组，因此需要键

render() {
  return <React.Fragment>{...itemsArray}</React.Fragment>
}

解决方案： itemsArray作为子级直接爆炸，因此不需要密钥

render() {
  return React.createElement(React.Fragment, {}, ...itemsArray)
}

这代表下面的

render() {
  return <React.Fragment>
    <YourItem />
    <YourItem />
    <YourItem />
  </React.Fragment>
}

Answer 2

React.Fragment是渲染数组的替代方法，如果您使用React.Fragment渲染多个元素，则不需要密钥

return (
  <head>
    <React.Fragment>
      <div>Here</div>
      <div>And HEre</div>
    </React.Fragment>
  </head>
);

但是，无论何时需要渲染元素数组，都需要指定一个键。如果在数组中的每个元素上指定一个键（一个唯一键将改进优化）或使用React.Children.toArray()，如果不存在但是不是最佳的话，则可以使用{{1}}来避免警告