Javascript 如何在React中创建彩色方块板？

我想创建一个带有彩色方块的板。重点是我想要一个有4种颜色的数组，我需要用数组中的随机颜色填充每个正方形

现在我生成n个随机颜色（colors.js文件）

…我在Board.js组件中显示n个不同的sqaure：

import React, { Component } from "react";

import { generateColors } from "../../utils/colors";
import "./Board.css";

class Board extends Component {
  state = {
    colors: generateColors(12)
  };
    
  render() {
    const { colors } = this.state;

    const squares = colors.map((color, index) => {
      return (
        <div key={index} className="square" style={{ background: color }}></div>
      );
    });

    return <div className="squares">{squares}</div>;
  }
}

export default Board;

import React，{Component}来自“React”；
从“./../utils/colors”导入{generateColors}”；
导入“/Board.css”；
类板扩展组件{
状态={
颜色：生成颜色（12）
};
render（）{
const{colors}=this.state；
常量方块=颜色。贴图（（颜色，索引）=>{
返回(
);
});
返回{squares}；
}
}
导出默认板；

---

但这是错误的，因为我创建了n个（本例中为12个）正方形，并用n个（本例中为12个）颜色填充它们。我需要有一个颜色数组（例如颜色=[黑、白、蓝、绿]）并用该数组中的随机颜色填充n个正方形（本例中为12个）。颜色是一个颜色数组，而不是单一颜色。因此，您必须获得特定的颜色，例如，通过索引

const squares=colors.map（（颜色，索引）=>{
const color=colors[Math.floor（Math.random（）*4）]；
//或动态*colors.length
返回(
);
});

是的，但我有12种颜色，我映射了这12种颜色，这12种颜色创建了12个不同的正方形。我需要12个正方形，例如4种颜色的数组

import React, { Component } from "react";

import { generateColors } from "../../utils/colors";
import "./Board.css";

class Board extends Component {
  state = {
    colors: generateColors(12)
  };
    
  render() {
    const { colors } = this.state;

    const squares = colors.map((color, index) => {
      return (
        <div key={index} className="square" style={{ background: color }}></div>
      );
    });

    return <div className="squares">{squares}</div>;
  }
}

export default Board;

const squares = colors.map((color, index) => {
   const color = colors[Math.floor(Math.random() * 4)];
                             // or dynamically   * colors.length
   return (
       <div key={index} className="square" style={{ background: color }}></div>
   );
});