gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 19:59:22 25 4
gpt4 key购买 nike

我想要带有彩色文本的数组中的按钮。我使用 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;

Screenshot of app

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

最佳答案

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

style={{color: color}}

那个

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

关于javascript - 在 react 中使用 map 功能设置按钮的文本和颜色的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53560437/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com