在React中使用Jquery的正确方法是什么? [英] What is the right way to use Jquery in React?
问题描述
我正在尝试使用使用大量jQuery的Layout/Template的项目.
I am trying to work on a project which is using a Layout/Template which uses a lot of jQuery.
我已经学会了将模板与ReactJS Project集成在一起，但是，我正在寻找一种可以完全替代jQuery的解决方案.
I have learned to integrate the template with ReactJS Project, however, I am looking for a solution where I can completely replace the jQuery.
我的解决方案之一是在React的ComponentDidMount()或Render()函数中使用jQuery函数.
One of my solution is to use jQuery functions inside ComponentDidMount() or Render() function of React.
这种方法正确吗?这是正确的方法吗?
Is this approach correct? Is it the right way?
我在下面附上了一个小例子:
I have attached a small example below:
import React, { Component } from 'react';
import '../stylesheets/commonstyles.css';
import '../stylesheets/bootstrap-sidebar.css';
import '../stylesheets/sidebar1.css';
import $ from 'jquery';
class NavBar extends Component {
constructor(props){
super(props);
this.openSidebar = this.openSidebar.bind(this);
}
openSidebar(){
console.log('hello sidebar');
}
componentWillMount(){
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
$('.search-btn').on("click", function () {
$('.search').toggleClass("search-open");
return false;
});
});
}
这是我的Render函数.
{/* <!--- SIDEBAR -------> */}
<div class="wrapper" style={{paddingTop:60}}>
{/* <!-- Sidebar Holder --> */ }
<nav id="sidebar">
<div class="sidebar-header">
<h3>Dashboard</h3>
<strong>BS</strong>
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="#homeSubmenu" /*data-toggle="collapse" */ aria-expanded="false">
<i class="ti-home"></i>
Home
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li><a href="#">Home 1</a></li>
<li><a href="#">Home 2</a></li>
<li><a href="#">Home 3</a></li>
</ul>
</li>
<li>
<a href="#" style={{color:"white"}}>
<i class="ti-align-justify" ></i>
About
</a>
<a href="#pageSubmenu" /*data-toggle="collapse" */ aria-expanded="false" style={{color:"white"}}>
<i class="ti-text"></i>
Pages
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</li>
<li>
<a href="#" style={{color:"white"}}>
<i class="ti-paragraph"></i>
Portfolio
</a>
</li>
<li>
<a href="#" style={{color:"white"}}>
<i class="ti-control-play"></i>
FAQ
</a>
</li>
<li>
<a href="#" style={{color:"white"}}>
<i class="ti-share-alt"></i>
Contact
</a>
</li>
</ul>
</nav>
{ /* <!-- Page Content Holder --> */ }
<div id="content">
</div>
</div>
推荐答案
这种方法正确吗?这是正确的方法吗?
Is this approach correct? Is it the right way?
不.没有正确的方法，也没有正确的方法同时使用jQuery和React/Angular/Vue.
No. No approach is correct and there is no right way to use both jQuery and React/Angular/Vue together.
原因是jQuery通过选择元素并在元素中添加/删除元素来操纵DOM.
The reason is that jQuery manipulates the DOM by, for example, selecting elements and adding/deleting stuff into/from them.
其他框架不操纵DOM，而是从数据生成DOM，并在数据更改时重新生成.
The other frameworks don't manipulate the DOM, they generate it from data, and regenerate it when the data changes.
问题是，jQuery不了解React的存在和动作，而React不了解jQuery的存在和动作.这必然会导致应用程序损坏，充满破解和变通办法，难以维护，更不用说您必须加载两个库而不是一个.
The problem is, jQuery has no clue about React's presence and actions, and React has no clue about jQuery's presence and actions. This will necessarily lead to a broken application, full of hacks and workarounds, unmaintainable, not to mention that you have to load two libraries instead of one.
解决方案:不能同时使用jQuery或React.
Solution : use jQuery OR React, not both together.
这篇关于在React中使用Jquery的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
