时间戳

首页 > 解决方案 > 在设置按钮的文本和颜色时使用地图功能的问题

javascript - 在设置按钮的文本和颜色时使用地图功能的问题

问题描述

我希望从数组中获得带有彩色文本的按钮。我使用 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}两次时，它给了我一个错误。这是为什么？有人可以向我解释吗？

标签： javascriptreactjsecmascript-6

解决方案

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

style={{color: color}}

接着就，随即

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

推荐阅读