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

Question

I'm trying to conditionally show or not show per say a button based on data that I receive from clicking on a point. I realized that regular jquery functions to add a class don't really work in React. So I figured I could store strings in the state like

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

This way I can conditionally show or hide a button by

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

After the render() I have more or less:

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
}

Then in componentDidMount() I have a function that depending on the data received from clicking on a point I do the following: 1) reset all the classes stored in the state to "hide" 2) based on conditions set some of them to "show" 3) concatenate all the classes stored in the state with various styling classes

UPDATE: I've long since found an easier solution to this problem, however, I'm guessing some people might have similar issues. Therefore, I'll update this question with more psuedocode and a workaround: maybe someone down the line can solve this. This component is particularly frustrating to work with because I haven't been able to make it as modular as I want because of the particular library I'm working with. There are actually about a 1000 lines in this component (I know I know not good).

WORKAROUND: For those of you who are having trouble with a component's lifecycle in dynamically setting parts of the DOM but don't want to use global variables to set classNames, jquery functions, or use react syntax to show components containing the content I recommend you do the following.

You can still have a set_hidden_container() set content dynamically, you just have to set things based on an id with innerHTML instead of setting a state object to be a string "show". The important thing is, however, that for every time you need to dynamically change content you reset these references to be empty as well as force an update. You can simply change the state of anything and then in componentDidUpdate() you can insert 1) a conditional to check if the innerHTML was actually set or not (since you're not always going to be displaying everything) and 2) within that conditional you can set whatever logic you want associated with the content showing on the page.

Answer 1

componentDidMount is invoked immediately after a component is mounted. If you want to set classNames based on clicks, I would put that logic in componentDidUpdate , which is invoked after updating occurs.