Question

我可以在列表渲染中使用React.Fragment并将键分配给该“ Fragment”父对象吗？

我正在尝试使用css网格构建项目列表布局，这要求所有元素都是容器的直接子代。假设所需的结果看起来像这样。

<div className="container">

  <img src="imgPathFor1stProject">
  <h1>title for 1st project</h1>
  <p>description for 1st project</p>

  <img src="imgPathFor2ndProject">
  <h1>title for 2nd project</h1>
  <p>description for 2nd project</p>
  ...
</div>

但是我们都知道列表渲染需要返回一个封闭的标签，我们可以使用React.Fragment来处理它。然后，jsx将如下所示：

projects.map(project => (
    <>
      <img src={project.imagePath}/>
      <h1>{project.title}</h2> 
      <p>{project.description}</p>
    </>
  ));

但是问题来了，我无法为列表的每个子项分配键，因为没有实际元素包装所有这些元素。

我尝试做：< key={project.id}>和<React.Fragment key={project.id}>，两者都不起作用。

有没有办法解决这个问题？我仍然想在display:grid元素上应用.container。

谢谢！

Answer 1

https://reactjs.org/docs/fragments.html

键控片段用显式语法声明的片段可能具有密钥。一个用例是将一个集合映射到一个片段数组，例如，创建一个描述列表：

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

分配了“键”后，我可以使用React.Fragment进行列表渲染吗？

1 个答案: