将"key“属性添加到保存在变量中的组件中
将"key“属性添加到保存在变量中的组件中
提问于 2018-11-08 15:20:28
在我的应用程序中，我需要加载多个菜单，这取决于用户安装了什么产品。这就是我要做的：
renderProductMenus() {
return (
<div className="row">
{this.state.loadedProducts.map(loadedProduct => loadedProduct.state.productMenu)}
</div>
);
}这个实例中的productMenu是一个组件。但我收到了警告
数组或迭代器中的每个子元素都应该有一个唯一的“键”支柱。
对我来说，最简单的方法是将"key“属性直接添加到如下组件中：
<ProductMenu key="mykey" />但我想看看是否可以在装载阶段做到这一点，比如：
loadedProduct => loadedProduct.state.productMenu.addProp({key: value})Stack Overflow用户
回答已采纳
发布于 2018-11-08 17:24:43
方法1:
您可以在组件周围添加一个React.Fragment包装器，并为此添加密钥。以下是一个例子：
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
loadedProducts: [
<ProductMenu name = 'Menu1' / >,
<ProductMenu name = 'Menu2' / >,
<ProductMenu name = 'Menu3' / >
]
};
}
render() {
const menuItems = this.state.loadedProducts.map((menu, i) => {
return (
<React.Fragment key={i}>
{menu}
</React.Fragment>);
});
return (<div>{menuItems}</div>);
}
}
class ProductMenu extends React.Component {
render() {
return <div>{this.props.name}</div>
}
}
ReactDOM.render( <Main /> ,
document.getElementById('root')
);<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="root" />
方法2:
您可以使用React.cloneElement而不是添加额外的包装器。
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
loadedProducts: [
<ProductMenu name = 'Menu 1' / >,
<ProductMenu name = 'Menu 2' / >,
<ProductMenu name = 'Menu 3' / >
]
};
}
render() {
const menuItems =
React.Children.map(this.state.loadedProducts, (menu, i) =>
React.cloneElement(menu, { key: i })
);
return (<div>{menuItems}</div>);
}
}
class ProductMenu extends React.Component {
render() {
return <div>{this.props.name}</div>
}
}
ReactDOM.render( <Main /> ,
document.getElementById('root')
);<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="root" />
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53210775
复制相关文章
相似问题
腾讯云开发者
