Reactjs 在React componentDidMount（）中，{不工作，但我没有收到任何错误

现在我没有收到任何错误，但我的componentDiDMount不起作用，我不知道为什么。我是新来react的，所以可能有一个我没有看到的突出问题。任何帮助/见解都会非常棒。

除非你确切知道自己在做什么，否则你不能将jQuery与react混合使用

---

绝对不能保证在

componentDidMount（）中可以看到或不看到DOM节点

将保留他们的事件监听器。

componentDidMount函数可能正在工作，但正如@AKX所说，同时使用jQuery和React是一个坏主意。相反，使用React/JSX的内置API，例如

state

来执行onClick事件。类似这样：

import React, { Component } from "react";
import $ from "jquery";

export class App extends Component {
  componentDidMount() {
    $(".dropdown-submenu a.test").on("click", function(e) {
      $(this)
        .next("ul")
        .toggle();
      e.stopPropagation();
      e.preventDefault();
    });
  }

render() {...
 }
}

export default App;

类下拉列表扩展了React.Component{
状态={
决战：错误
}
切换下拉列表（事件）{
event.preventDefault（）
this.setState（{showDropdown:！this.state.showDropdown}）
}
render（）{
返回(
使其不必要）。这最初设置为
false
，因此下拉列表仅在单击按钮时显示。若要在组件渲染时显示它，请更改为
true

接下来，我们声明处理单击事件的函数。这将阻止默认操作（即导航到/#），然后将
showDropdown
的值切换到与当前相反的位置

然后，我们设置渲染；将
toggleDropdown
传递给
onClick
事件。这是JSX，因此看起来可能与您熟悉的事件处理程序等稍有不同。最后，我们仅在
This.state.showDropdown
为真时显示dropdown元素

因此，
componentDidMount
部分代码实际上是不必要的-如果您想尝试它，可以运行
this.setState（{showDropdown:true}）
，查看组件装载/呈现时下拉列表是否显示。但仅用于测试，因为可以在
状态中执行此简单操作，我们最初将其设置为false。
Jquery and React
React直接处理事件并使用虚拟DOM，从理论上讲，使用React意味着您根本不需要使用jQuery。在React应用程序外部更改浏览器DOM意味着React可能不再处理状态、事件和UI呈现

通常，如果可能的话，我会尽量避免将Jquery与React结合使用

解决方案
我建议使用与类“.dropdown子菜单a.test”对应的HTML元素，并将其移动到此组件中，或者使用呈现JSX的单独组件

如果你不确定，你可以阅读如何做到这一点

一旦有了这个新组件，您就可以呈现JSX，然后使用react的onClick事件处理程序来实现您想要的

最后，要以无序列表元素（ul）为目标，可以使用react REF来实现这一点

所有这些信息都可以在react文档中找到。
react和jquery在本质上是不一致的。如果您可以在不使用jquery的情况下重新构造问题，您可能会得到更好的答案。
class Dropdown extends React.Component {

  state = {
    showDropdown: false
  }

  toggleDropdown(event) {
    event.preventDefault()
    this.setState({ showDropdown: !this.state.showDropdown })
  }

  render() {
    return (
      <div>
        <a href="#" onClick={this.toggleDropdown}>Show dropdown</span>
        {this.state.showDropdown && <ul>...</dropdown>}
      </div>
  }
}