Question

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

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

我看到某个地方可以通过更改组件名称来更改组件的颜色。然后，在Css文件中，每个名称具有不同的样式。变化发生在两种颜色之间。我不认为该解决方案适合我的问题，因为我有40多种不同的颜色

Answer 1

<!doctype html>
<html>
 <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
    <title>Example</title>
 </head>

 <body>
    <div id="app">
    </div>	
    <script type="text/babel">
        const SquareParent = () => {
          return <Square parentColorNumber={11}/>
        }
        
        const 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"];

        class Square extends React.Component {
            constructor(props){
                super(props);
                this.state = { backgroundColor: null };
            }

            handleClick = () => {
                const backgroundColor = arrayOfColors[this.props.parentColorNumber - 1];
                this.setState({ backgroundColor });
            }

            render() {
              const { backgroundColor } = this.state;
              return (
                <div>
                  <button className="square" style={{ backgroundColor }} onClick={ () => this.handleClick() }>
                    Current color - {this.state.backgroundColor || 'none'}
                  </button>
                </div>
              );
            }
        }
        ReactDOM.render(<SquareParent/>, document.getElementById('app'))
   </script>
 </body>
</html>

我添加为parentColorNumber：11.您可以根据需要进行更改。您有一个父组件，该组件将数据发送到其子组件。

Answer 2

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

如何动态更改组件的样式？

2 个答案: