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

Posted

技术标签:

【中文标题】React - 循环的每个元素的随机背景颜色【英文标题】:React - Random background color to each element for loop 【发布时间】:2019-05-09 12:04:36 【问题描述】:

我正在使用 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;

这是我的 SquaresContainer 组件:

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;

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

【问题讨论】:

您对每个 div 使用相同的道具颜色,相反,您应该为每个 div 生成不同的颜色 【参考方案1】:
You are creating 6 squares with the same color:

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;
  


Where color passed by props through here:

<SquaresContainer color=this.generateRandomColor() />

【讨论】:

尝试通过props传递方法generateRandomColor并调用。 嘿!奥布里加达达尼洛! Eu já não tenho feito dessa maneira?

以上是关于React - 循环的每个元素的随机背景颜色的主要内容,如果未能解决你的问题,请参考以下文章

React ChakraUI 条纹表单单元格背景颜色

在循环中更改 div 元素的背景颜色交叉淡入淡出

vscode自定义背景颜色

将随机背景颜色应用于多个 DIV

如何在 React 中应用 classNames 以更改 React 中子 div 之一的背景颜色

如何使用 javascript 或 jquery 为每个数组元素设置背景颜色和边框?