如何从componentDidMount（）（不componentDidUpdate（））更新DOM中的状态对象？

Question

我试图有条件地显示或不显示每个说一个按钮，根据我点击一个点收到的数据。我意识到定期添加一个类的jquery函数在React中并不真正起作用。所以，我想我可以通过

<button className={this.state.hidden_components.add_comment}> Add Comment </button> 

的状态存储字符串像

this.state: { 
    hidden_components: { 
     add_comment: "hide" 
    } 
} 

这样我可以有条件地显示或隐藏按钮后渲染（）我有或多或少：

componentDidMount() { 
    this.state.g = new Dygraph 
    this.state.modal = new Modal 

    this.state.modal.setContent(use some ID here to reference a div that is hidden but will show up in the modal) 

    const set_hidden_container =() => { 
     // I'm just going to use this = notation instead of setState() 
     // this is supposed to reset the 
     this.state.hidden_components = "hide" 
     if (check_comment(this.state.points[at some index].value)) { 
     this.state.hidden_components = "show" 
     } 
    } 

    this.state.g.updateOptions({ 

    pointClickCallback: (event, p) => { 
     console.log("i clicked a point on the graph") 
     this.setState({ 
     currentPoint: p 
     }) 

     set_hidden_containers() 

     // force update 
     this.setState({ 
     currentPoint: p 
     }) 

     // I want the modal to open a div of things that only show jsx based on logic in set_hidden_container() 
     this.state.modal.open() 
    } 
    } 

componentDidUpdate() { 
    // logic goes here for like event listeners and anything that queries the DOM after initialization 
} 

然后在componentDidMount（）我有一个函数，取决于点击点接收到的数据，我做了以下操作： 1）将存储在状态中的所有类重置为根据具体的情况“隐藏” 2）设置一些他们的“秀” 3）串联存储在状态与各种造型类

的所有类

更新： 我早就找到一个更容易的解决了这个问题，但是，我猜一些人可能会遇到类似的问题。因此，我会用更多的psuedocode和解决方法来更新这个问题：或许有人可以解决这个问题。这个组件特别令人沮丧，因为我正在使用的特定库，因为我无法像我想要的那样使它成为模块化。这个组件实际上大约有1000行（我知道我不知道）。

解决方法： 对于那些你谁是有与组件的生命周期麻烦动态地设置DOM的部分，但不想使用全局变量来设置类名，jQuery的功能，或使用反应语法来说明含有成分我建议你做的内容如下。

你仍然可以动态地设置set_hidden_​​container（）设置内容，你只需要根据带有innerHTML的id设置事物，而不是将状态对象设置为字符串“show”。但重要的是，每次您需要动态更改内容时，都会将这些引用重置为空，并强制更新。您可以简单地改变任何事情的状态，然后在componentDidUpdate（）中插入1）一个条件来检查是否实际设置了innerHTML（因为你并不总是要显示所有内容），2）在该条件内您可以设置任何您想要与页面上显示的内容相关联的逻辑。

Answer 1

componentDidMount在安装组件后立即调用。如果你想根据点击来设置classNames，我会把这个逻辑放在componentDidUpdate之内，在更新发生后调用它。