在没有唯一键警告的情况下，如何使用React呈现材质UI网格

Question

我在这个项目中使用React和Material UI，需要呈现一个网格，其中的行来自数据数组，列包含如下所示的特定信息：

<Grid container>
  {myData.map((record) => (
    <>
      <Grid item>{record.field1}</Grid>
      <Grid item>{record.field2}</Grid>
      <Grid item>{record.field3}</Grid>
    </>
  )}
</Grid>

这当然会导致React警告列表中的项没有唯一键。

问题是， 在React中无效，并且用实际标记（例如

）替换 <>会使网格混乱；它期望网格项直接包含在网格容器中。

有什么办法可以解决这个问题吗？

匿名用户

您可以将键传递给显式的 组件(<>仅用于该组件）。

React文档-键控片段：

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

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>
  );
}

key是唯一可以传递给fragment的属性。将来，我们可能会添加对附加属性的支持，比如事件处理程序。

Answer 1

相关问题

Answer 2

您可以将键传递给显式的 组件(<>仅用于该组件）。

React文档-键控片段：

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

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>
  );
}

key是唯一可以传递给fragment的属性。将来，我们可能会添加对附加属性的支持，比如事件处理程序。