让 React 组件与 jQuery 侦听器一起使用

IT技术 jquery reactjs
2021-05-24 08:37:14

虽然这不是解决问题的最佳方法,但我确实需要我的 React 应用程序与 jQuery 交互,直到我想出更好的解决方案。

在我的入口点组件的 HTML 页面中,我有一个简单的 jQuery 侦听器——见下文:

<html>
... // Omitted for brevity
<body>
... // Omitted for brevity
<script type="text/javascript">

   $(".my-class").on("click", function() {
      debugger;
      // We'll do something here
   })

</script>
</body>
</html>

然后,在我的愚蠢组件中,我有以下内容但它不起作用。当我单击按钮时,我没有到达我在侦听器中设置的断点。

const MyComponent = () => {
   return(
      <div>
         <a href="#" className="btn-primary my-class">Click Me!</a>
      </div>
   );
}

export default MyComponent;

知道如何让这个工作吗?

1个回答

在就绪处理程序中添加您的方法:

jQuery(function($) {
  // your code here
});

此外,您可以在 componentDidMount 钩子中调用 jQuery 方法:

componentDidMount() {
  // your jQuery code here
}

如果您不想在组件本身中挂钩您的 jquery 方法而只是在 html 中使用,那么您还需要在您的文件中注入 React 和 ReactDom:

// index.js
import { React } from 'react'
import { ReactDom } from 'react-dom'
import { $ } from 'jQuery'

// index.html
<script src="index.js"></script>
<!-- your jquery hook -->