Question

我正试图有条件地显示或不显示基于我点击某个点时收到的数据的按钮。我意识到添加类的常规jquery函数在React中并不真正起作用。所以我想我可以在状态中存储字符串，如

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

这样我可以通过

有条件地显示或隐藏按钮

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

渲染（）后，我或多或少：

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部分但是不想使用全局变量来设置classNames，jquery函数或者使用反应语法来显示包含我建议的内容的组件的组件生命周期出现问题的人，我建议你这样做以下。

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

Answer 1

安装组件后立即调用

componentDidMount。如果你想根据点击设置classNames，我会把这个逻辑放在componentDidUpdate中，这在更新发生后会被调用。

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

1 个答案: