Reactjs 在分配“键”时，我可以使用React.Fragment进行列表呈现吗？

我可以在列表呈现中使用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>
    </>
  ));

但是问题来了，我不能给列表的每个子元素分配一个键，因为没有实际的元素包装所有这些元素

我试过这样做：，但两者都不起作用

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

谢谢

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

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.Fragments分配密钥，但由于某些原因，它对我不起作用，并且会让我感到一阵不适。但在我重建它之后，它工作了！