React不更新样式

Question

当使用React单击按钮时，我正在尝试更改样式。当按钮被点击时，我可以看到值在改变，但是样式没有改变。我一直在以各种方式写作，但都没有运气。

export const Paragraph = () => {
    var state = 'none'
    const changeState = () => {
        state = state == 'none' ? 'inline-block' : 'none'
    }

    return (
        <div>
            <p style={{display: state}}</p>
        </div>
    )
}

Answer 1

设置类而不是内联样式的更好方法。

 class Paragraph extends React.Component{
    constructor(){
        super();
        this.state = {
            isClicked: false
        };
    }
    onClick(){
        let condition = this.state.isClicked;
        this.setState({isClicked: !condition})
    }
    render(){
        return (
            <div onClick={this.onClick.bind(this)}>
                <p className={this.state.isClicked? "class_1" : "class_2"}></p>
            </div>
        );
    }
}