javascript - 我可以向 React 片段添加一个关键道具吗?
问题描述
我dl
在 React 中生成一个:
<dl>
{
highlights.map(highlight => {
const count = text.split(highlight).length - 1;
return (
<>
<dt key={`dt-${highlight.id}`}>{highlight}</dt>
<dd key={`dd-${highlight.id}`}>{count}</dd>
</>
);
})
}
</dl>
这给了我警告:
警告:列表中的每个孩子都应该有一个唯一的“关键”道具。
这将删除警告,但不会生成我想要的 HTML:
<dl>
{
highlights.map(highlight => {
const count = text.split(highlight).length - 1;
return (
<div key={highlight.id}>
<dt>{highlight}</dt>
<dd>{count}</dd>
</div>
);
})
}
</dl>
而且我无法key
向片段(<> </>
)添加道具。
如何解决这个问题?
我正在使用反应16.12.0
。
解决方案
要向片段添加键,您需要使用完整的片段语法:
<React.Fragment key={your key}>
...
</React.Fragment>
请参阅此处的文档https://reactjs.org/docs/fragments.html#keyed-fragments
推荐阅读
- go - 使用 gorm 的 AutoMigrate 时出现“重复的列名 'id'”错误
- python - 保存时网格图像中的不均匀正方形
- kotlin - 如何以编程方式将当前 ClassLoader 传递给 KotlinToJVMBytecodeCompiler 以进行动态(运行时)编译 kotlin 代码?
- jenkins - Jenkins 在没有 maven 的情况下构建
- azure - 认知服务 - Bing 语法检查 API v7.0
- html - 如何修复溢出-y:滚动不起作用
- python - 基于标签关联图像的最佳方法
- rdf - 如何实施shacl规则
- c++ - 如何在恒定时间内从提升图中获取顶点?
- twitter-bootstrap - 无法在 bootstrap-vue (nuxt) 中覆盖 $navbar-light-color