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>
  )
}