[英]How to get rid of the this warning: "Warning: validateDOMNesting(...)"?
我正在尝试在我的 React 应用程序中实现一个功能组件: https : //gist.github.com/andreisamoila74/bca55271c3992c079eed018e5c95a1be这些是警告:
Warning: Each child in a list should have a unique "key" prop.
Check the render method of `ViewCode`
in Fragment
in ViewCode (at App.js:87)
in Route (at App.js:86)
in Switch (at App.js:72)
in main (created by Basic)
in Basic (created by Context.Consumer)
in Content (at App.js:71)
in section (created by Context.Consumer)
in BasicLayout (created by Context.Consumer)
in Layout (at App.js:68)
in App (at src/index.js:13)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:12)
in Suspense (at src/index.js:11)
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>.
in tr (at View.js:49)
in div (at View.js:48)
in tbody (at View.js:93)
in table (at View.js:92)
in section (created by Context.Consumer)
in BasicLayout (created by Context.Consumer)
in Layout (at View.js:91)
in div (at View.js:90)
in ViewCode (at App.js:87)
in Route (at App.js:86)
in Switch (at App.js:72)
in main (created by Basic)
in Basic (created by Context.Consumer)
in Content (at App.js:71)
in section (created by Context.Consumer)
in BasicLayout (created by Context.Consumer)
in Layout (at App.js:68)
in App (at src/index.js:13)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:12)
in Suspense (at src/index.js:11)
Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>.
in div (at View.js:48)
in tbody (at View.js:93)
in table (at View.js:92)
in section (created by Context.Consumer)
in BasicLayout (created by Context.Consumer)
in Layout (at View.js:91)
in div (at View.js:90)
in ViewCode (at App.js:87)
in Route (at App.js:86)
in Switch (at App.js:72)
in main (created by Basic)
in Basic (created by Context.Consumer)
in Content (at App.js:71)
in section (created by Context.Consumer)
in BasicLayout (created by Context.Consumer)
in Layout (at App.js:68)
in App (at src/index.js:13)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:12)
in Suspense (at src/index.js:11)
我理解每个警告,但我不确定如何摆脱它。 关于表格,我需要这些 div,以便我的 AddComment 组件以正确的方式放置。 我应该如何解决这个问题? 谢谢 :)
反应键需要在映射的最外层元素上声明。 在您的情况下, Fragment
,或者更确切地说是div
因为Fragment
对您没有太大作用。
第二个错误:“validateDOMNesting(...): 不能作为“的孩子出现是说tr
不能是div
的孩子。
您仍然可以使用Fragment
来返回单个节点并提供反应键。
data.code.source_code.split("\n").forEach((line, index) => {
rows.push(
<Fragment key={index}> // <-- attach react key to Fragment
<tr className="line">
<td className="line-number">{index + 1}</td>
<td id={"plus" + index} className="plus-square-line">
<PlusSquareTwoTone
className="plus-square"
onClick={() => toggleLineCommentStatus(index + 1)}
/>
</td>
<td
id={"codeblock" + index}
className={"language-" + codeLanguage}
style={rowStyle}
>
{line}
</td>
</tr>
<div style={divStyle}>
{lineComments[index + 1] ? (
<AddComment
id={id}
lineNumber={index + 1}
onCancelLineCommentShow={toggleLineCommentStatus}
/>
) : null}
</div>
</Fragment>
);
});
当你创建一个孩子的数组时,比如第 46 行,他们每个人都需要有一个key
道具。
如果没有它,React 就没有办法知道新旧数组的不同之处,因此它必须重新渲染所有子级,这是性能拖累。 使用key
prop,它通过比较新的和旧的孩子数组中的键来检查新的或删除的孩子。
你可以在这里阅读它https://kentcdodds.com/blog/understanding-reacts-key-prop
我是这样解决的:
rows.push(
<React.Fragment key={index}>
<tr key={index} className="line">
<td className="line-number">{index + 1}</td>
<td id={"plus" + index} className="plus-square-line">
<PlusSquareTwoTone className="plus-square"
onClick={() => toggleLineCommentStatus(index + 1)} />
</td>
<td id={"codeblock" + index}
className={'language-' + codeLanguage} style={rowStyle}>
{line}
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
{lineComments[index + 1]
?
<AddComment
id={id}
lineNumber={index + 1}
onCancelLineCommentShow={toggleLineCommentStatus}
/>
:
null
}
</td>
</tr>
</React.Fragment>
);
谢谢你的回答
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.