Question

我编写了javascript代码，以从颜色列表中获得随机颜色：

const colours = [blue[800], green[500], orange[500], purple[800], red[800]];
const colour = colours[Math.floor(Math.random() * colours.length)];

在我的JSX代码中，我用随机颜色渲染图像

{this.state.data.map((n, i) => {
    return (
    <Avatar style={{backgroundColor: colour}}>{n.author.charAt(0).toUpperCase()}</Avatar>
    );
})}

我遇到的问题是，渲染的每个对象都将具有相同的随机颜色，例如橙子。我要实现的是渲染的每个项目都会有不同的颜色，但是我不确定如何实现。

Answer 1

const colours = [blue[800], green[500], orange[500], purple[800], red[800]];
const getColour = () => colours[Math.floor(Math.random() * colours.length)];

{this.state.data.map((n, i) => {
   return (
    <Avatar style={{backgroundColor: getColour()}}> 
      {n.author.charAt(0).toUpperCase()}
    </Avatar>
   );
})}

Answer 2

这应该有效

{this.state.data.map((n, i) => {
   // move this line here
   const colour = colours[Math.floor(Math.random() * colours.length)];

    return (
    <Avatar style={{backgroundColor: colour}}>{n.author.charAt(0).toUpperCase()}</Avatar>
    );
})}

如何为数组中的每个项目分配随机颜色？

2 个答案: