Reactjs React-循环中每个元素的随机背景色

我正在使用Reactjs进行“颜色猜测游戏”，我在给每个方块随机添加背景颜色方面遇到了一些问题。所以当我做for循环来显示6个方块，并传递颜色道具时，所有方块的颜色都相同，而不是每个方块的随机颜色。。。 提前谢谢你

这是我的应用程序组件：

import React, { Component } from 'react';
import './App.css';

import SquaresContainer from './containers/SquaresContainer/SquaresContainer';


class App extends Component {

  constructor() {
    super();
    this.state = {
      correctColor: undefined,
      rgbDisplay: '',
      colorSquares: undefined
    }
  }

  generateRandomColor() {
    let r = Math.round((Math.random() * 255)); //red 0 to 255
    let g = Math.round((Math.random() * 255)); //green 0 to 255
    let b = Math.round((Math.random() * 255)); //blue 0 to 255
    return 'rgb(' + r + ', ' + g + ', ' + b + ')';
  };



  componentDidMount() {
    let correctColor = this.generateRandomColor();
    let colorSquares = this.generateRandomColor();

    this.setState({
      correctColor: correctColor,
      rgbDisplay: correctColor,
      colorSquares: colorSquares
    })
  };


  render() {

    return (

      <div id="game">

        {/* HEADER */}
        <div id="header" className="header">
          <h1 className="header__elem">THE GREAT
              <br />
            <span id="rgbDisplay">
              {this.state.rgbDisplay}
            </span>
            <br />
            GUESSING GAME
              <br />
            <span id="author">by Ana Fig</span>
            <br />
            <span id="language">REACT</span>
          </h1>
        </div>
        {/* / HEADER */}

        {/* MENU BUTTONS */}
        <div id="menu">
          <div>
            <button id="newColorButton">NEW COLORS</button>
          </div>
          <span id="message"></span>
          <div>
            <button className="easyMode">EASY</button>
            <button className="hardMode selected">HARD</button>
          </div>
        </div>
        {/* / MENU BUTTONS */}

        {/* SQUARES COMPONENT */}
        <SquaresContainer color={this.generateRandomColor()} />
        {/* / SQUARES COMPONENT */}


      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';

import './SquaresContainer.css';

import Square from '../../components/Square/Square';


class SquaresContainer extends Component {

  constructor(props) {
    super(props);
    this.state = {
      squares: 6
    }
  }
  createSquares = () => {
    let squares = [];
    for (let i = 0; i < this.state.squares; i++) {
      squares.push(<Square color={this.props.color} key={i} />);
    }
    console.log(this.props.color)
    return squares;
  }

  render() {


    return (
      <div id="squaresContainer" className="container">
        {this.createSquares()}
      </div>
    );
  }
};

export default SquaresContainer;

import React from 'react';

import './Square.css';

const Square = (props) => {

  return (
    <div className='square square__elem' style={{backgroundColor: props.color}}></div>
  );
};

export default Square;

import React，{Component}来自'React'；
导入“/App.css”；
从“./containers/SquaresContainer/SquaresContainer”导入SquaresContainer；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
颜色：未定义，
RGB显示：“”，
彩色方块：未定义
}
}
generateRandomColor（）{
设r=Math.round（（Math.random（）*255））；//红色0到255
设g=Math.round（（Math.random（）*255））；//绿色0到255
设b=Math.round（（Math.random（）*255））；//蓝色0到255
返回'rgb（'+r+'、'+g+'、'+b+'）；
};
componentDidMount（）{
让correctColor=this.generateRandomColor（）；
让colorSquares=this.generateRandomColor（）；
这是我的国家({
correctColor:correctColor，
RGB显示：正确的颜色，
彩色方块：彩色方块
})
};
render（）{
返回(
{/*头*/}
伟大的


{this.state.rgbDisplay}


猜谜游戏


安娜·菲格


反应
{/*/HEADER*/}
{/*菜单按钮*/}
新颜色
容易的
硬的
{/*/菜单按钮*/}
{/*正方形分量*/}
{/*/SQUARES COMPONENT*/}
);
}
}
导出默认应用程序；

这是我的方形容器组件：

import React, { Component } from 'react';
import './App.css';

import SquaresContainer from './containers/SquaresContainer/SquaresContainer';


class App extends Component {

  constructor() {
    super();
    this.state = {
      correctColor: undefined,
      rgbDisplay: '',
      colorSquares: undefined
    }
  }

  generateRandomColor() {
    let r = Math.round((Math.random() * 255)); //red 0 to 255
    let g = Math.round((Math.random() * 255)); //green 0 to 255
    let b = Math.round((Math.random() * 255)); //blue 0 to 255
    return 'rgb(' + r + ', ' + g + ', ' + b + ')';
  };



  componentDidMount() {
    let correctColor = this.generateRandomColor();
    let colorSquares = this.generateRandomColor();

    this.setState({
      correctColor: correctColor,
      rgbDisplay: correctColor,
      colorSquares: colorSquares
    })
  };


  render() {

    return (

      <div id="game">

        {/* HEADER */}
        <div id="header" className="header">
          <h1 className="header__elem">THE GREAT
              <br />
            <span id="rgbDisplay">
              {this.state.rgbDisplay}
            </span>
            <br />
            GUESSING GAME
              <br />
            <span id="author">by Ana Fig</span>
            <br />
            <span id="language">REACT</span>
          </h1>
        </div>
        {/* / HEADER */}

        {/* MENU BUTTONS */}
        <div id="menu">
          <div>
            <button id="newColorButton">NEW COLORS</button>
          </div>
          <span id="message"></span>
          <div>
            <button className="easyMode">EASY</button>
            <button className="hardMode selected">HARD</button>
          </div>
        </div>
        {/* / MENU BUTTONS */}

        {/* SQUARES COMPONENT */}
        <SquaresContainer color={this.generateRandomColor()} />
        {/* / SQUARES COMPONENT */}


      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';

import './SquaresContainer.css';

import Square from '../../components/Square/Square';


class SquaresContainer extends Component {

  constructor(props) {
    super(props);
    this.state = {
      squares: 6
    }
  }
  createSquares = () => {
    let squares = [];
    for (let i = 0; i < this.state.squares; i++) {
      squares.push(<Square color={this.props.color} key={i} />);
    }
    console.log(this.props.color)
    return squares;
  }

  render() {


    return (
      <div id="squaresContainer" className="container">
        {this.createSquares()}
      </div>
    );
  }
};

export default SquaresContainer;

import React from 'react';

import './Square.css';

const Square = (props) => {

  return (
    <div className='square square__elem' style={{backgroundColor: props.color}}></div>
  );
};

export default Square;

import React，{Component}来自'React'；
导入“/SquaresContainer.css”；
从“../../components/Square/Square”导入正方形；
类SquaresContainer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
正方形：6
}
}
createSquares=（）=>{
设平方=[]；
for（设i=0；i

这是方形组件：

import React, { Component } from 'react';
import './App.css';

import SquaresContainer from './containers/SquaresContainer/SquaresContainer';


class App extends Component {

  constructor() {
    super();
    this.state = {
      correctColor: undefined,
      rgbDisplay: '',
      colorSquares: undefined
    }
  }

  generateRandomColor() {
    let r = Math.round((Math.random() * 255)); //red 0 to 255
    let g = Math.round((Math.random() * 255)); //green 0 to 255
    let b = Math.round((Math.random() * 255)); //blue 0 to 255
    return 'rgb(' + r + ', ' + g + ', ' + b + ')';
  };



  componentDidMount() {
    let correctColor = this.generateRandomColor();
    let colorSquares = this.generateRandomColor();

    this.setState({
      correctColor: correctColor,
      rgbDisplay: correctColor,
      colorSquares: colorSquares
    })
  };


  render() {

    return (

      <div id="game">

        {/* HEADER */}
        <div id="header" className="header">
          <h1 className="header__elem">THE GREAT
              <br />
            <span id="rgbDisplay">
              {this.state.rgbDisplay}
            </span>
            <br />
            GUESSING GAME
              <br />
            <span id="author">by Ana Fig</span>
            <br />
            <span id="language">REACT</span>
          </h1>
        </div>
        {/* / HEADER */}

        {/* MENU BUTTONS */}
        <div id="menu">
          <div>
            <button id="newColorButton">NEW COLORS</button>
          </div>
          <span id="message"></span>
          <div>
            <button className="easyMode">EASY</button>
            <button className="hardMode selected">HARD</button>
          </div>
        </div>
        {/* / MENU BUTTONS */}

        {/* SQUARES COMPONENT */}
        <SquaresContainer color={this.generateRandomColor()} />
        {/* / SQUARES COMPONENT */}


      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';

import './SquaresContainer.css';

import Square from '../../components/Square/Square';


class SquaresContainer extends Component {

  constructor(props) {
    super(props);
    this.state = {
      squares: 6
    }
  }
  createSquares = () => {
    let squares = [];
    for (let i = 0; i < this.state.squares; i++) {
      squares.push(<Square color={this.props.color} key={i} />);
    }
    console.log(this.props.color)
    return squares;
  }

  render() {


    return (
      <div id="squaresContainer" className="container">
        {this.createSquares()}
      </div>
    );
  }
};

export default SquaresContainer;

import React from 'react';

import './Square.css';

const Square = (props) => {

  return (
    <div className='square square__elem' style={{backgroundColor: props.color}}></div>
  );
};

export default Square;

从“React”导入React；
导入“./Square.css”；
const Square=（道具）=>{
返回(
);
};
导出默认方块；

这是正在发生的事情的打印：

您正在创建6个颜色相同的正方形：
createSquares=（）=>{
设平方=[]；
for（设i=0；i

您对每个div使用相同的道具颜色，相反，您应该为每个div生成不同的颜色，以便通过道具传递方法generateRandomColor并调用它。嘿！奥布里加达·达尼洛！欧盟成员国是谁？