JSX 將屬性添加到不同對象的數組

Question

我有一個包含一堆子頁面的頁面：

render(){
  let elements = [<Apple>,<Orange>,<Pear>];
  return <div>
    {Elements}
  </div>
}

我想為這些元素中的每一個賦予相同的屬性，例如顏色：

render(){
  let elements = [<Apple>,<Orange>,<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>
}

我該怎么做？

Answer 1

修復你的elements

let elements = [Apple, Orange, Pear];

然后使用數組map傳遞一個 common prop 。

render() {
  let elements = [Apple, Orange, Pear];
  const elementsWithColorBlue = elements.map((Element) => (
    <Element color="blue" />
  ));
  
  return <div>{elementsWithColorBlue}</div>
}

Answer 2

不同於上述答案的另一種寫作方式如下

render(){
  return (
    <div>
      {[Apple, Orange, Pear].map(Element => <Element color="blue" />)}
    </div>
  )
}