主页 / 问题 / 954368
Accepted
borzz.one
Asked:2020-03-09 23:04:12 +0000 UTC2020-03-09 23:04:12 +0000 UTC

在 React 组件中解析 jQuery

  • 772

如何允许 React 组件从其 main.js 文件运行 jQuery 代码？

main.js 文件中有这样的代码

$('.category-menu > li').hover(function(e) {
  $(this).addClass('active')
  e.preventDefault()
})
$('.category-menu').mouseleave(function(e) {
  $('.category-menu li').removeClass('active')
  e.preventDefault()
})

它需要在组件中工作，但它的位置很好。谁遇到过类似的情况？

javascript

1 个回答

  1. Best Answer

    如果 main.js 是一个程序集（webpack、gulp 等），那么

    npm install jquery --save

    在构建开始文件中：

    let $ = require('jquery');
window.$ = window.jQuery = $;

    像往常一样从组件调用 React，但请记住，在使用选择器调用 jQuery 时，某些元素可能根本不会被渲染，因此选择器找不到任何东西。一切都取决于具体情况。但当然最好不要混用，否则会得到不可预知的效果。

    如果 main.js 只是一个包含 jQuery 调用的脚本，那么在包含 main.js 脚本之前添加从本地目录或 CDN 加载的 jQuery 到您的页面

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/js/main.js"></script>

    或（如果本地服务器上有 jquery）

    <script src="/js/jquery.min.js"></script>
<script src="/js/main.js"></script>
    • 0

相关问题