如何在ReactJS中使用JQuery

Question

我是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？

Answer 1

步骤1：

npm install jquery

第2步：

touch loader.js 

项目文件夹中的某个位置

第三步：

//loader.js

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

步骤4：

在导入需要jQuery的文件之前，将加载程序导入到您的根文件中

//App.js

import '<pathToYourLoader>/loader.js'

步骤5：

现在在代码中的任何地方使用jQuery：

//SomeReact.js

class SomeClass extends React.Compontent {

...

handleClick = () => {

   $('.accor > .head').on('click', function(){

      $('.accor > .body').slideUp();

      $(this).next().slideDown();

   });

}

...

export default SomeClass