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

我试图根据点击一个点时收到的数据，有条件地显示或不显示每个按钮。我意识到，用于添加类的常规jquery函数在React中实际上不起作用。所以我想我可以像

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

通过这种方式，我可以有条件地显示或隐藏按钮

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

然后在componentDidMount（）中，我有一个函数，根据单击某个点时接收到的数据，我执行以下操作： 1） 将状态中存储的所有类重置为“隐藏” 2） 根据条件，将其中一些设置为“显示” 3） 将状态中存储的所有类与各种样式类连接起来

更新： 我早就找到了解决这个问题的更简单的方法，不过，我猜有些人可能也有类似的问题。因此，我将用更多的伪代码和一个解决方法来更新这个问题：也许有人可以解决这个问题。使用这个组件尤其令人沮丧，因为由于我使用的是特定的库，所以我无法使它像我想要的那样模块化。实际上，这个组件中大约有1000行（我知道我知道不好）

解决方法： 对于那些在动态设置DOM部分时对组件生命周期有困难，但不想使用全局变量设置类名、jquery函数或使用react语法显示包含内容的组件的人，我建议您执行以下操作

---

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

在安装组件后立即调用。如果您想基于单击设置类名，我会将该逻辑放入，在更新发生后调用该逻辑

啊，我明白了，所以我在Update（）中添加了需要定期更新的任何部分/逻辑，以及需要在Mount（）中装入的任何部分/逻辑。我觉得很愚蠢。然而，问题似乎是，因为我在componentDidMount（）中初始化了一个图形对象（它在Mount中，因为它引用了DOM中的id）但是我在update中引用了该对象来更新它，所以在控制台中出现了一个错误：TypeError:cannotread属性'updateOptions'为null。有没有办法解决这个问题？另一件需要注意的事情是，对象本身是全局的，因为我将它存储在状态中，所以我不确定为什么它会说对象为空？componentDidMount（）不是在componentDidUpdate（）之前初始化的吗？我可能误解了你的问题<创建组件实例时，将调用code>componentDidMount（）<如果道具或状态更改，将调用code>componentDidUpdate（）。通过在

componentDidMount（）

中调用

setState（）

，然后在单击后通过

componentDidUpdate（）

中的

this.state.myObject

访问它，您应该能够将图形对象存储在组件的状态。这有帮助吗？还是我仍然有误解？我想我没有正确解释。但是componentDidMount（）初始化一个图形对象和一个被引用的模态对象1）获取点和它的数据2）具有可以在模态中编辑数据的字段。一开始我以为你说的会起作用，但只有在我可以引用Update（）中Mount（）中编写的变量（图形和模态对象）的情况下才会起作用，但不幸的是，情况似乎并非如此。你能添加更多的代码吗？如果它太长和复杂，也许可以做一个简化的版本。现在，你有几段文字试图解释你的应用程序流程，但它仍然很难可视化。如果我理解正确，您真正的问题是您不知道如何在其他生命周期方法中引用在

componentDidMount

中声明的对象？是的！这是一个大问题。老实说，我可以用很多不同的方法来做这件事，这实际上并没有妨碍我的项目，但我真的很想彻底地学习。是的，我想我会尝试添加更多的代码。老实说，我认为这种方法的解决方案并不像我所想的那样，对于直接与生命周期的几个部分一起工作的任何组件，它的通用性都会有所不同。但是，您必须将所有相关变量移动到state对象中，以便全局引用它，然后为您在DOM中执行的任何EventListener或查询设置条件，以便仅在设置DOM时触发它。另外，这很烦人，因为我认为您必须触发状态更改来更新组件。在任何情况下，我都不会使用这种方法，因为还有一个问题。状态不是引用React组件内部内容的唯一方法。在使用状态之外，将对象保存到

此

变量是完全有效的。你能在这篇文章中添加更多的代码吗？即使它是简化的伪代码，以更好地说明你的应用程序流程和你正在尝试做什么？@AndyNoelker我更新了这篇文章，我不确定这是否能让事情变得更清楚。我需要设置我正在改变的内容的基础（比如模态），然后根据我用来生成图表的JavaScript库的PosikCLCKELCABFACK函数来改变基础上的内容。如果我移动我刚才解释的最小值，整个图形将更新重置我希望保持不变的其他部分（例如，如果用户

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
}