如何在ReactJS中使用JQuery

Question

如何在ReactJS中使用JQuery

144

我刚接触 ReactJS。之前我使用 jQuery 来设置所需的任何动画或功能。但现在我正在尝试使用 ReactJS 并尽量减少对 jQuery 的使用。

我的情况是：

我正在尝试使用 ReactJS 构建一个手风琴效果。

<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>
<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>
<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>

使用jQuery：

$('.accor > .head').on('click', function(){
   $('.accor > .body').slideUp();
   $(this).next().slideDown();
});

我的问题：

如何使用ReactJS完成这个任务？

- ND.Santos

1

你能检查一下这个链接，它可能会对你有所帮助：https://discuss.reactjs.org/t/jquery-with-react/683 - Codebrekers

2

我在这个视频中找到了一个有用的教程-https://youtu.be/AMMetkCvztg。 - Prem

16

请尽量不要在React中使用jQuery。 - quirimmo

4

请参考 https://reactjs.org/docs/integrating-with-other-libraries.html, 了解为什么不建议在 React 中使用 jQuery。来源：https://stackoverflow.com/a/46946447/52277。 - Michael Freidgeim

2

这是混纺织物！避免使用它 :D - Joey Baruch

14个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sao · Answer 1

使用诸如Bootstrap或MUI之类的样式库来完成此操作。React具有React Strap，一个稳定的Bootstrap / React组件包。可以同时使用这两个样式框架，但混合使用它们并不是一个好习惯。我建议使用React Strap，因为我认为它具有更好的React组件，这是个人喜好。

如果您继续使用React，您会发现jQuery不是最好的解决方案。它可能可以工作，但由于React和jQuery都从DOM中工作（而React管理着影子DOM），因此您可能会遇到问题。有人提到使用React生命周期在加载时使用该库。对于我们中使用更新的函数组件和钩子（我相信React 16+）的人，我们可以使用useEffect hook在加载时调用它。

useEffect(() => {
  // use jquery here if you must, this way the component is loaded 
  //and the dom matches whats in react (or should)
}, []);

风格和组件库是最佳实践。就像您使用 Formik 管理表单组件一样（不必每次重新创建轮/表单），同样也适用于风格组件库。

https://www.npmjs.com/package/reactstrap

https://getbootstrap.com/docs/5.0/components/accordion/ https://mui.com/components/accordion/

- Naresh Goyani · Answer 2

我已经尝试了下面的脚本，它对我来说运行得很好。

安装jQuery：npm install jquery
从jQuery导入$：import $ from "jquery";
在组件Did Mount方法中编写以下代码

componentDidMount() {
    $(document).on('click','.accor >  .head',function(){
        `var closestDiv = $(this).closest('.accor');`
        `closestDiv.find('.body').slideToggle();`
    });
}

- Seif Eddine Slimene · Answer 3

你可以在React中使用JQuery而不需要进行以下操作：

import $ from 'jquery'

要完成此操作，您需要在终端中前往包含 package.json 的根文件夹，并输入以下命令：

yarn add -D expose-loader

然后将此配置添加到您的webpack.config.js文件中：

  module: {
    rules: [ 
      {test: require.resolve('jquery'), loader: 'expose-loader?$!expose-loader?jQuery'}
    ]
  }

这将把 $ 和 jQuery 暴露到全局作用域中，因此您可以在代码的任何地方使用它们。

不要忘记像这样将 Jquery 添加到您的供应商捆绑包中：

module.exports = config({
  entry: {
    vendor: [ 
      'jquery'
    ]
  }
...

现在你可以使用jquery而无需在代码中导入它，因为这就是expose-loader为你做的。

为了测试它是否正常工作，只需将以下内容添加到项目中的任何文件中：

console.log($);

并在您的浏览器控制台中查看，它将显示$变量而不会抛出错误。

- Astro · Answer 4

如果您需要为所有React应用程序添加jQuery代码，则应将jQuery添加到组件的componentDidMount()生命周期函数中：

class App extends React.Component {
  componentDidMount() {
    // Jquery Code for All components of the React App
  }
}

但是，如果你需要在应用的每个组件中使用jQuery代码，你应该将代码放在useEffect()函数中。

const ComponentExample = () => {

  useEffect(() => {
    // Jquery Code for this component
  })

  return (
    <div>
        <h1></h1>
    </div>
  )
}