时间戳

首页 > 解决方案 > 让 React 组件与 jQuery 监听器一起工作

jquery - 让 React 组件与 jQuery 监听器一起工作

问题描述

虽然这不是解决问题的最佳方法，但我确实需要我的 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;

知道我怎样才能让它工作吗？

标签： jqueryreactjs

解决方案

在准备好的处理程序中添加您的方法：

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

推荐阅读