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 - 循环的每个元素的随机背景颜色的主要内容,如果未能解决你的问题,请参考以下文章