javascript - 在 react 中使用 map 功能设置按钮的文本和颜色的问题

Question

我想要带有彩色文本的数组中的按钮。 我使用 ReactJS，我的 app.js 中有这段代码:

import React, { Component } from 'react';
import './App.css';

const myArray=["orange","red","yellow","green","blue","yellow"];

class App extends Component {
     render() {
          // this work
          const buttons=myArray.map((color,i)=><button key={i} style={color={color}}> my test </button> )

          //**// but this don't work**
         // const buttons=myArray.map((color,i)=><button key={i} style={color={color}}> {color} </button> )

          // and this work                          
          const buttons2=myArray.map((color,i)=><button  key={i}>{color}</button>)

           return (
                 <div>
                     <div>{buttons}</div>
                     <div>{buttons2}</div>  
                 </div>
               );
     }
}
export default App;

当我使用 {color} 两次时，它给我一个错误。这是为什么？谁能给我解释一下？

Answer 1

你的两个版本都不应该工作。您需要定义一个 style 对象。应该是这样的

style={{color: color}}

那个

const buttons = myArray.map((color, i) => <button key={i} style={{ color: color }}> {color} </button>)