Question

我是ReactJS的新手（实际上我正在学习），我编写了一个简单的代码来检查样式更改，但是据我所知，当react状态发生变化时，它将重新渲染组件，但是当我这样做时这种情况不会发生，因此我尝试了forceUpdate（）并完成了这项工作，但样式没有再次更改，之前，我已经在一个简单的状态下尝试过此方法，并且它可以工作，但是当我在一个对象中设置样式时，一切都搞砸了，谢谢您的帮助

class Check extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            sty: {
                width: 200 + 'px',
                backgroundColor: 'blue',
                height: 200 + 'px', marginBottom: 20 + 'px'
            }
        }
        this.update = this.update.bind(this);
    }

    update() {
        let sty = this.state.sty;
        sty.backgroundColor = 'red';

        this.setState = ({ 
            sty 
        })
        this.forceUpdate();
    }

    render() {
        console.error(this.state.sty['backgroundColor']);
        return (
            <div style={this.state.sty} onClick={this.update} id="checkBox" className="First">
                <span>{this.props.children}</span>
            </div>
        )
    }
}

ReactDOM.render(
    <div>
        <Check key={1}>1</Check>
        <Check key={2}>2</Check>
        <Check key={3}>3</Check>
        <Check key={4}>4</Check>
    </div>, 
document.getElementById('container'))

Answer 1

不使用=。请使用this.setState（{...}）

https://reactjs.org/docs/react-component.html#setstate

class Check extends React.Component{ 
  constructor(props) {   
    super(props);
     this.state = { 
        sty : { width : 200 +'px', 
                backgroundColor : 'blue', 
                height: 200 + 'px', marginBottom : 20+'px' }
         }
     this.update = this.update.bind(this);
 }
 update(){
   this.setState(prevState=>({sty:{...prevState.sty,backgroundColor:'red'}}))
 } 

render() { 
    console.error(this.state.sty['backgroundColor']);
    return (
<div style={this.state.sty} onClick={this.update} id="checkBox" className="First">
    <span>{this.props.children}</span>

</div> ) 
        } 
}

 ReactDOM.render(

<div>
    <Check key={1}>1</Check>
    <Check key={2}>2</Check>
    <Check key={3}>3</Check>
    <Check key={4}>4</Check>
</div>, document.getElementById('container'))

Answer 2

在React组件中，$array_new是一个函数，您必须调用它才能使用它。

这是您的代码的有效示例：

setState

class Check extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            sty: {
                width: 200 + 'px',
                backgroundColor: 'blue',
                height: 200 + 'px', marginBottom: 20 + 'px'
            }
        }
    }

    update = () => {
        this.setState({ sty: {
                width: 200 + 'px',
                backgroundColor: 'red',
                height: 200 + 'px', marginBottom: 20 + 'px'
            }
        });
    }

    render() {
        return (
            <div style={this.state.sty} onClick={this.update} id="checkBox" className="First">
                <span>{this.props.children}</span>
            </div>
        )
    }
}

ReactDOM.render(
    <div>
        <Check key={1}>1</Check>
        <Check key={2}>2</Check>
        <Check key={3}>3</Check>
        <Check key={4}>4</Check>
    </div>, 
document.getElementById('container'))

好的做法是使用CSS样式，并使您的组件className根据其状态而变化

ReactJS：不能通过改变状态来改变样式

2 个答案: