如何解决JSX将属性添加到不同对象的数组
我的页面上有一堆子页面:
render(){
let elements = [<Apple>,<Orange>,<Pear>];
return <div>
{Elements}
</div>
}
我想赋予这些元素相同的属性,例如颜色:
render(){
let elements = [<Apple>,<Pear>];
elements.forEach(i=>i.setAttribute('color','blue')); //???
return <div>
{Elements}
</div>
}
因此它等同于:
render(){
return <div>
<Apple color='blue'/>
<Orange color='blue'/>
<Pear color='blue'/>
</div>
}
我该怎么做?
解决方法
将您的elements
固定为
let elements = [Apple,Orange,Pear];
然后使用数组map
传递通用的prop
。
render() {
let elements = [Apple,Pear];
const elementsWithColorBlue = elements.map((Element) => (
<Element color="blue" />
));
return <div>{elementsWithColorBlue}</div>
}
,
除了上面的答案,另一种写作方式如下:
render(){
return (
<div>
{[Apple,Pear].map(Element => <Element color="blue" />)}
</div>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。