Reactjs 动态更改颜色

好吧，我还没有反应过来，所以这是我的问题。。。。我确实成功地动态渲染了5个球组件，我想要实现的是，每次单击球时，球都会改变颜色并保持这种状态，直到再次单击球时，球会恢复为默认颜色。也可以更改多个球的颜色，例如更改1 3 5的颜色，但再次单击时会恢复默认颜色。。。有什么想法吗

.Ball {
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #3d3c3a;
    border-radius: 100%;
    float: left;
    background-color: #fff;
    margin: 20px;
    font-weight: 500;
    box-shadow: 1px 1px 0.5px #000;
    align-items: center;
    cursor: pointer
}

 const balls = props => {
  return (
    <Aux>
      <p className={classes.Ball} id={props.id} onClick={props.clicked}>
        {props.number}
      </p>
    </Aux>
  );
};

class Game extends Component {
  state = {
    ids: [
      { id: 1 },
      { id: 2 },
      { id: 3 },
      { id: 4 },
      { id: 5 }
    ],
    chosenBallsIds: []
  };



  clickedBallHandler = ballIndex => {
    let chosenBallsIds = this.state.chosenBallsIds;
    if (chosenBallsIds.includes(ballIndex)) {
      let index = chosenBallsIds.indexOf(ballIndex);
      if (index > -1) {
        chosenBallsIds.splice(index, 1);
      }
    } else {
      chosenBallsIds.push(ballIndex);
    }

    if (chosenBallsIds.length >= 9) {
      chosenBallsIds.pop();
    }

    chosenBallsIds.sort(function(a, b) {
      return a - b;
    });

    this.setState({
      chosenBallsIds: chosenBallsIds
    });

  };


  render() {
    let balls = null;
    balls = (
      <div>
        {this.state.ids.map((ball, index) => {
          return (
            <Balls
              key={ball.id}
              number={ball.id}
              clicked={() => this.clickedBallHandler(index + 1)}
              id={index + 1}
            />
          );
        })}
      </div>
    );


    return (
      <Aux>
        <div className={classes.Balls}>{balls}</div>
      </Aux>
    );
  }
}

export default Game;

.Ball{
宽度：40px；
高度：40px；
文本对齐：居中；
线高：40px；
颜色：#3d3c3a；
边界半径：100%；
浮动：左；
背景色：#fff；
利润率：20px；
字号：500；
盒影：1px 1px 0.5px#000；
对齐项目：居中；
光标：指针
}
常量球=道具=>{
返回(

{props.number}

);
};
类游戏扩展组件{
状态={
ID:[
{id:1}，
{id:2}，
{id:3}，
{id:4}，
{id:5}
],
chosenBallsIds:[]
};
clickedBallHandler=ballIndex=>{
让chosenBallsIds=this.state.chosenBallsIds；
if（chosenBallsIds.includes（ballIndex））{
let index=chosenBallsIds.indexOf（ballIndex）；
如果（索引>-1）{
chosenBallsIds.拼接（索引1）；
}
}否则{
chosenBallsIds.push（球指数）；
}
如果（chosenBallsIds.length>=9）{
chosenBallsIds.pop（）；
}
chosenBallsIds.sort（函数（a，b）{
返回a-b；
});
这是我的国家({
chosenBallsIds:chosenBallsIds
});
};
render（）{
设balls=null；
球=(
{this.state.ids.map（（球，索引）=>{
返回(
this.clickedBallHandler（索引+1）}
id={index+1}
/>
);
})}
);
返回(
{balls}
);
}
}
出口违约博弈；

您可能需要查看。这将允许您为每次单击设置不同的背景色。另外，我将研究设置十六进制颜色数组，然后当用户单击时，您可以根据需要将状态设置为数组中的新项。您的if语句很复杂，可能不需要

你找到解决方案了吗？嘿，不，我没有找到任何解决方案…在同一个应用程序中做了一大堆其他的事情，它几乎完成了，只是这个。。。我仍在寻找解决办法。因此，我在render方法中使用.map生成每个球，并将每个单击的球保存在chosenBallsIds数组中，但如何为球着色，这一点并没有引起任何注意。。。还有什么帮助吗？你看过我关于css动态属性的帖子了吗？您可以使用动态字符串，传入不同于您所在州的值，并从您所在州的十六进制值数组中传递值。您的样式类似于style={{{

background color:#${this.state.hex}

}