Question

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;

现在我没有收到任何错误，但是我的componentDiDMount不能正常工作，我不明白为什么。我是新来的人，所以也许有一个明显的问题我没有看到。任何帮助/见解都会很棒。

Answer 1

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

绝对不能保证您在componentDidMount()中可能看到或可能看不到的DOM节点将保留其事件侦听器。

Answer 2

componentDidMount函数可能正在工作，但是正如@AKX所说，将jQuery和React一起使用是一个坏主意。而是使用React / JSX的内置API，例如state来执行onClick事件。像这样：

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>
  }
}

这是怎么回事？首先，正如您所做的那样，声明组件。其次，我们初始化一个状态变量（以前在constructor内完成，但class fields使其不必要）。最初将其设置为false，因此仅在单击按钮时才会显示下拉列表。要在组件渲染时显示它，请更改为true。

接下来，我们声明处理点击事件的函数。这样可以防止执行默认操作（即导航至/＃），然后将showDropdown的值切换为当前值的相反值。

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

因此，代码的componentDidMount部分实际上是不必要的-如果您想尝试一下，可以在其中运行this.setState({ showDropdown: true })来查看下拉列表是否在组件安装/渲染时显示。但是，只有这样做才能进行测试，因为可以在state变量中将其设置为false。

Answer 3

jQuery和React

React直接处理事件并使用虚拟DOM，从理论上讲，使用React应该意味着您根本不需要使用jQuery。在React应用程序外部更改浏览器DOM意味着React可能不再处理状态，事件和UI呈现。 Source

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

解决方案

我建议采用与类“ .dropdown-submenu a.test ”相对应的HTML元素，并将其移入该组件或呈现JSX的单独组件中。

如果不确定，可以阅读有关here的操作方法。

一旦有了这个新组件，就可以渲染JSX，然后使用react的onClick事件处理程序来实现所需的功能。您可以了解有关here

的信息

最后，要定位无序列表元素（ul），可以使用react refs here。

所有这些信息都可以在react文档中找到。

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

3 个答案:

jQuery和React

解决方案