Question

我正在使用Reactjs进行“颜色猜测游戏”，并且在为每个方块提供随机背景颜色时遇到一些问题。因此，当我执行for循环以显示6个正方形并传递颜色道具时，它将为所有正方形提供相同的颜色，而不是为每个正方形提供随机的颜色... 预先谢谢你！

这是我的应用程序组件：

# df columns list
df_columns = df.columns

# Explode customDimensions so that each row now has a {index, value}
cd = df.withColumn('customDimensions', F.explode(cd.customDimensions))

# Put the index and value into their own columns
cd = cd.select(*df_columns, 'customDimensions.index', 'customDimensions.value')

# Join with metadata to obtain the name from the index
metadata = metadata.select('index', 'name')
cd = cd.join(broadcast(metadata), "index", 'left')

# Pivot cd so that each row has the id, and we have columns for each custom dimension
piv = cd.groupBy(df_columns).pivot('name').agg(F.first(F.col('value')))


return piv

这是我的SquaresContainer组件：

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;

这是正在发生的事情的印刷品：

Answer 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()} />

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

1 个答案: