我正在尝试处理一个使用大量 jQuery 的布局/模板的项目。
我已经学会了将模板与 ReactJS 项目集成,但是,我正在寻找一个可以完全替代 jQuery 的解决方案。
我的解决方案之一是在 React 的 ComponentDidMount()
或 Render()
函数中使用 jQuery 函数。
这种方法是否正确?方法对吗?
我在下面附上了一个小例子:
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 的正确方法。
例如,jQuery 通过选择元素和向其中/从中添加/删除内容来操作 DOM。通常,它会选择现有的 <div>
并设置其文本。
其他框架不操作 DOM;他们从数据中生成它,并在这些数据发生变化时重新生成它(例如在 Ajax 调用之后)。
问题是,jQuery 不知道 React 的存在和 Action ,React 也不知道 jQuery 的存在和 Action 。
这必然会导致应用程序损坏,充满黑客和变通方法,无法维护,更不用说您必须加载两个库而不是一个库。
例如,jQuery 将选择 <button>
并添加一个 .click()
听众;但是一瞬间之后,React/Angular/Vue 可能会在这个过程中重新生成 DOM 和按钮,使 jQuery 的 .click()
失效。 .所以你会在 Stackoverflow 上问一个问题,想知道为什么你的 .click()
不行。你最终会添加一个脏的 setTimeout()
hack,以延迟 jQuery 的 click()
处理程序附件,直到 React 重新生成您的按钮。这是通往 hell 的直达高速公路。
解决方案:使用 jQuery 或 (React/Angular/Vue),而不是同时使用。
关于javascript - 在 React 中使用 Jquery 的正确方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55970506/