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;
这是我的 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;
解决方案
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()} />
推荐阅读
- java - 我可以在这个正则表达式中添加什么以使其也通过 Java 中的下划线分隔字符串?
- php - 在 wordpress 中翻译文本
- ansible - Ansible 从多个 Json 文件中访问相同的变量
- php - Wordpress:警告:urlencode() 期望参数 1 是字符串,数组在 wp-includes/formatting.php 的第 4791 行
- windows - PowerShell Ctrl+L 没有按预期工作,如何调试?
- javascript - sendEmail 功能:如何限制这一点,使单元格值必须满足特定的文本值,例如“是”或“否”
- c# - 从 C# 代码发送电子邮件的问题 throw smtp
- c - 套接字创建失败的原因是什么?
- laravel - Laravel 删除事件监听器
- javascript - Google Search Console 错误:未捕获的 SyntaxError:意外的令牌函数