好的,我有一个映射函数,它在数组中运行,并在DOM上为数组中的每一项("colorItem")创建div。数组是一个颜色数组,数组中的每一项都是颜色的十六进制值(例如:#1a703f
)。
我正在尝试更改每个div项的背景,使其与数组中的项相匹配。但是,因为我不能访问内联CSS JSX中map函数中的变量。
{this.state.colorsArray.map(colorItem =>
<div className="m-4">
<div className="max-w-sm rounded overflow-hidden shadow-lg w-48">
<div style={{ backgroundColor: {colorItem} }} className="h-32">
</div>
<div className="px-6 py-4">
<p className="text-grey-darker">
{colorItem}
</p>
</div>
</div>
</div>
`
发布于 2018-06-13 06:44:30
像这样的东西可能会对你有用:
{this.state.colorsArray.map(colorItem => {
let colorstyle = {
backgroundColor: colorItem
}
return (
<div className="m-4">
<div className="max-w-sm rounded overflow-hidden shadow-lg w-48">
<div style={colorstyle} className="h-32">
</div>
<div className="px-6 py-4">
<p className="text-grey-darker">
{colorItem}
</p>
</div>
</div>
</div>
})}
发布于 2018-06-13 06:59:40
如果你调用lambda中的参数'backgroundColor',你可以使用这个对象的缩写:
{this.state.colorsArray.map(backgroundColor =>
<div className="m-4">
<div className="max-w-sm rounded overflow-hidden shadow-lg w-48">
<div style={{ backgroundColor }} className="h-32">
</div>
<div className="px-6 py-4">
<p className="text-grey-darker">
{backgroundColor}
</p>
</div>
</div>
</div>
}
https://stackoverflow.com/questions/50826761
复制相似问题