我在React中使用一个调色板生成器，我遇到的问题是，当我尝试将不同的颜色传递给将形成调色板的每个子divs时，每个子divs都得到相同的颜色。
这是密码
class ColorPaletteContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
color: null,
};
this.setRandomColor = this.setRandomColor.bind(this);
}
setRandomColor() {
let randomColor = "rgb(";
for (let i = 0; i < 3; i++) {
randomColor += Math.floor(Math.random() * 255);
if (i < 2) {
randomColor += ",";
}
}
randomColor += ")";
this.setState({
color: randomColor,
});
}
render() {
return (
<>
<ColorDiv color={this.state.color}></ColorDiv>
<ColorDiv color={this.state.color}></ColorDiv>
<ColorDiv color={this.state.color}></ColorDiv>
<button onClick={this.setRandomColor}>Press me!</button>
</>
);
}
}
class ColorDiv extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1 style={{ background: this.props.color }}>This is a color div!</h1>
</div>
);
}
}
基本上父组件将相同的颜色传递给所有3个子组件，因为我传递了相同的状态。知道我怎么通过不同的颜色吗？
使状态为颜色数组，如
this.state = {
colors: [],
}
然后生成并将nrandoms颜色推入其中，迭代数组并呈现子组
它看起来如下所示：
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
colors: []
};
this.setRandomColors = this.setRandomColors.bind(this);
}
generateRandomColor() {
let randomColor = "rgb(";
for (let i = 0; i < 3; i++) {
randomColor += Math.floor(Math.random() * 255);
if (i < 2) {
randomColor += ",";
}
}
randomColor += ")";
return randomColor;
}
setRandomColors() {
const colors = [];
for (let i = 0; i < 3; i++) {
colors.push(this.generateRandomColor());
}
this.setState(() => { return {colors: colors}; });
}
render() {
return (
<>
{this.state.colors.map((color) => {
return <ColorDiv color={color}></ColorDiv>;
})}
<button onClick={this.setRandomColors}>Press me!</button>
</>
);
}
}
