英文:
How this is working and not returning a warning validateDOMNesting(...)?
问题
我有这个问题，但我做了一个小改动，如下：
children: items.map((item) => {
const labelName = item.label;
//DONE:将硬编码的路径更改为从后端发送的路径
item.label = <NavLink to={item.key}>{labelName}</NavLink>;
return {
label: <div>{labelName}</div>,
key: item.key,
};
});
没有错误，它正在工作，我的问题是为什么？
英文:
I have this problem
<Menu
mode="horizontal"
items={
menuState &&
menuState?.map((valueMenus, index) => {
const key = index + 1;
const items = valueMenus.menusInferiores;
return {
key,
label: (
<div>
{valueMenus.menu} <DownOutlined />
</div>
),
children: items.map((item) => {
return {
label: <NavLink to={item.key}>{labelName}</NavLink>,
key: item.key,
};
}),
};
})
}
/>;
but, I did a little change like this :
children: items.map((item) => {
const labelName = item.label;
//DONE:Cambiar la ruta quemada por la ruta que nos envian del bk
item.label = <NavLink to={item.key}>{labelName}</NavLink>;
return {
label: <div>{labelName}</div>,
key: item.key,
};
});
no error
and it's working, my question is why ?
答案1
得分: 0
你只是将你的<NavLink/>组件用一个<div>包裹起来，这就是你所做的，而且这样做是有效的，因为根据错误提示中所述，<a>不再是<a>的子代了。要注意的是，<NavLink/>实际上是一个<a>元素，所以现在你有了：
<a>
<div><a></a></div>
</a>
英文:
you just wrraped your <NavLink/> component with a <div> this is what you did and this is working because <a> is no longer a descendant of <a> as mentioned is the error note that <NavLink/> is in fact an <a> element so instead of :
<a>
<a></a>
</a>
now you have :
<a>
<div><a></a></div>
</a>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论