从React中的组件中的click事件更新正文样式

Question

我有一个带有按钮的组件，它有一个clickEvent。单击此按钮时，我不想在html body标签中添加内联样式。我想在再次单击按钮时删除样式。我已经有方法来处理click事件的状态更改。我只需要知道正确的＆＃34;反应＆＃34;更新body标签上的样式以添加/删除overflow-y：hidden

的方法

handleConfigurationDrawerToggle() {
    this.setState(prevState => ({
        configurationDrawerOpen: !prevState.configurationDrawerOpen
    }))
}

<div 
    className={configurationDrawerModalClasses}
    onClick={this.handleConfigurationDrawerToggle} />

Answer 1

您可以使用componentDidUpdate生命周期挂钩在状态发生变化时随时处理切换：

componentDidUpdate(nextProps, nextState) {
    if(nextState.configurationDrawerOpen) {
        document.querySelector('body').style.overflowY = 'hidden';
    } else {
        document.querySelector('body').style.overflowY = 'auto';
    }
}