javascript - 如何从 componentDidMount() (而不是 componentDidUpdate())更新 DOM 中的状态对象？

Question

我正在尝试根据单击某个点收到的数据有条件地显示或不显示按钮。我意识到添加类的常规 jquery 函数在 React 中并不能真正工作。所以我想我可以将字符串存储在这样的状态中

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

这样我就可以有条件地显示或隐藏按钮

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

在 render() 之后我或多或少有:

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)将状态中存储的所有类与各种样式类连接起来

更新:我很早就找到了解决这个问题的更简单的解决方案，但是，我猜有些人可能有类似的问题。因此，我将用更多伪代码和解决方法更新这个问题:也许有人可以解决这个问题。这个组件使用起来特别令人沮丧，因为由于我正在使用的特定库，我无法将其模块化。这个组件实际上有大约 1000 行(我知道我知道不好)。

解决方法:对于那些在动态设置 DOM 部分时遇到组件生命周期问题但又不想使用全局变量来设置 classNames、jquery 函数或使用 React 语法来显示包含内容的组件的人，我建议您执行以下操作:下列的。

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

Answer 1

componentDidMount在安装组件后立即调用。如果你想根据点击设置 classNames，我会将该逻辑放在 componentDidUpdate 中，在更新发生后调用。