Javascript 如何动态更改组件'；什么样的风格？

为了简化代码，假设我必须使用组件（按钮）。父母和孩子。单击父对象时，会将属性（编号）发送给子对象。此数字有助于选择阵列中的特定颜色。然后，当我单击子按钮时，其颜色将更改为选定的颜色。这就是我的问题所在。我不知道如何用新颜色更新组件

var arrayOfColors = ["#cd6155", "#af7ac5", "#5499c7", "#48c9b0", "#58d68d", "#f5b041", "#dc7633", "#EAECEE",
                 "#c0392b", "#9b59b6", "#2980b9", "#1abc9c", "#2ecc71", "#f39c12", "#d35400", "#D5D8DC",
                 "#a93226", "#884ea0", "#2471a3", "#17a589", "#28b463", "#d68910", "#ba4a00", "#ABB2B9",
                 "#922b21", "#76448a", "#1f618d", "#148f77", "#239b56", "#b9770e", "#a04000", "#808B96",
                 "#7b241c", "#633974", "#1a5276", "#117864", "#1d8348", "#9c640c", "#873600", "#566573",
                 "#641e16", "#512e5f", "#154360", "#0e6251", "#186a3b", "#7e5109", "#6e2c00", "#2C3E50"];

var color = null; //Initial global value that changes to a number selected from the parent component

子组件

class Square extends React.Component {
    constructor(props){
        super(props);
        this.state = {value: null};
    }
    handleClick(){
        this.setState({value: color, });
        var myStyle = {background: "pink"};
        myStyle.background  = arrayOfColors[this.props.value];
        boardColor = myStyle;

        ...................................................
        This is where the update should happen (I suppose).
        The button with style={boardColor}
        ...................................................
    }
    render() {
      return (
        <button  className="square"  onClick={() => this.handleClick()}>
          {this.state.value}
        </button>
      );
    }
}

类Square扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:null}；
}
handleClick（）{
this.setState（{value:color，}）；
var myStyle={background:“pink”}；
myStyle.background=arrayOfColors[this.props.value]；
boardColor=myStyle；
...................................................
这就是应该进行更新的地方（我想）。
样式为{boardColor}的按钮
...................................................
}
render（）{
返回(
this.handleClick（）}>
{this.state.value}
);
}
}

我发现在某个地方可以通过更改组件的名称来更改组件的颜色。然后，在

Css

文件中，每个名称都有不同的样式。这种变化发生在两种颜色之间。我不认为这个解决方案适合我的问题，因为我有超过40种不同的颜色{

class Square extends React.Component {
    constructor(props){
        super(props);
        this.state = {value: null,backgroundColor:null};
    }
    handleClick(){
        this.setState({value: color, });
        var  bg = arrayOfColors[this.props.value];
       this.setState({backgroundColor:bg});

    }
    render() {
      const { backgroundColor } = this.state;
      return (
        <button  className="square" style={{backgroundColor}}  onClick={() => this.handleClick()}>
          {this.state.value}
        </button>
      );
    }
}

建造师（道具）{ 超级（道具）； this.state={value:null，backgroundColor:null}； } handleClick（）{ this.setState（{value:color，}）； var bg=ArrayOfColor[this.props.value]； this.setState（{backgroundColor:bg}）； } render（）{ const{backgroundColor}=this.state； 返回( this.handleClick（）}> {this.state.value} ); } }

例子
常量SquareParent=（）=>{
返回
}
常量阵列颜色=[“cd6155”、“af7ac5”、“5499c7”、“48c9b0”、“58d68d”、“f5b041”、“dc7633”、“EAECEE”，
“#c0392b”、“#9b59b6”、“#2980b9”、“#1abc9c”、“#2EC71”、“#f39c12”、“#d35400”、“#D5D8DC”，
“#a93226”、“#884ea0”、“#2471a3”、“#17a589”、“#28b463”、“#d68910”、“#ba4a00”、“#ABB2B9”，
“922b21”、“76448a”、“1f618d”、“148f77”、“239b56”、“b9770e”、“a04000”、“808B96”，
“#7B24C”、“#633974”、“#1a5276”、“#117864”、“#1d8348”、“#9c640c”、“#873600”、“#566573”，
“#641e16”、“#512e5f”、“#154360”、“#0e6251”、“#186a3b”、“#7e5109”、“#6e2c00”、“#2C3E50”]；
类Square扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={backgroundColor:null}；
}
handleClick=（）=>{
const backgroundColor=ArrayOfColor[this.props.parentColorNumber-1]；
this.setState（{backgroundColor}）；
}
render（）{
const{backgroundColor}=this.state；
返回(
this.handleClick（）}>
当前颜色-{this.state.backgroundColor | |'none'}
);
}
}
ReactDOM.render（，document.getElementById（'app'））

您有几个选择。最直接的（但不是最复杂的和/或性能）将通过内联

样式
属性完成。另一个是，你可以利用js库中的一个css，比如。你如何用新的“内联样式”重新呈现组件？我想你已经通过接受的答案找到了答案——属性值的更改将触发重新呈现。现在可以了。除了
style={{backgroundColor}}
。我不得不改成
style={{{background:backgroundColor}}