如何在 React 中将不同的道具从父组件传递给多个子组件？

Question

我正在使用 React 中的调色板生成器，我遇到的问题是，当我尝试将不同的颜色传递给将形成调色板的每个子 div 时，每个子 div 都会获得相同的颜色。

这里是代码

    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 个子组件，因为我传递了相同的状态。知道如何传递不同的颜色吗？

Answer 1

让你的状态像一个颜色数组

this.state = {
  colors: [],
}

然后生成 n 随机颜色并将其推送到其中，遍历数组并渲染子元素

它看起来像这样：

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>
      </>
    );
  }
}