这个问题在这里已有答案:
虽然这不是解决问题的最佳方法,但我确实需要我的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;
知道我怎么能让这个工作吗?
在ready处理程序中添加方法:
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 -->