在 React 中使用 Jquery 的正确方法是什么? [英] What is the right way to use Jquery in React?

问题描述

我正在尝试处理一个使用了大量 jQuery 的布局/模板的项目.

我已经学会了将模板与 ReactJS 项目集成，但是，我正在寻找一种可以完全替代 jQuery 的解决方案.

我的解决方案之一是在 React 的 ComponentDidMount() 或 Render() 函数中使用 jQuery 函数.

这种方法正确吗?方法对吗?

我在下面附上了一个小例子:

import React, { Component } from 'react';导入'../stylesheets/commonstyles.css';导入'../stylesheets/bootstrap-sidebar.css';导入'../stylesheets/sidebar1.css';从'jquery'导入$；类导航栏扩展组件{构造函数(道具){超级(道具)；this.openSidebar = this.openSidebar.bind(this);}打开侧边栏(){console.log('你好侧边栏');}componentWillMount(){$(document).ready(function () {$('#sidebarCollapse').on('click', function () {$('#sidebar').toggleClass('active');});$('.search-btn').on("click", function () {$('.search').toggleClass("search-open");返回假；});});}

这是我的Render函数.

{/* */}<div class="wrapper" style={{paddingTop:60}}>{/* <!-- 侧边栏支架-->*/}<nav id="侧边栏"><div class="sidebar-header"><h3>仪表板</h3><strong>BS</strong>

<ul class="list-unstyled components"><li class="active"><a href="#homeSubmenu"/*data-toggle="collapse" */aria-expanded="false"><i class="ti-home"></i>家</a><ul class="collapse list-unstyled" id="homeSubmenu"><li><a href="#">首页 1</a></li><li><a href="#">首页 2</a></li><li><a href="#">首页 3</a></li><li><a href="#" style={{color:"white"}}><i class="ti-align-justify" ></i>关于</a><a href="#pageSubmenu"/*data-toggle="collapse" */aria-expanded="false" style={{color:"white"}}><i class="ti-text"></i>页面</a><ul class="collapse list-unstyled" id="pageSubmenu"><li><a href="#">第 1 页</a></li><li><a href="#">第 2 页</a></li><li><a href="#">第 3 页</a></li><li><a href="#" style={{color:"white"}}><i class="ti-paragraph"></i>文件夹</a><li><a href="#" style={{color:"white"}}><i class="ti-control-play"></i>常问问题</a><li><a href="#" style={{color:"white"}}><i class="ti-share-alt"></i>接触</a></nav>{/* */}<div id="内容">

解决方案

这种方法正确吗?方法对吗?

没有.没有一种方法是正确的，也没有将 jQuery 和 React/Angular/Vue 一起使用的正确方法.

jQuery 通过例如选择元素并向其中添加/删除内容来操作 DOM.通常，它选择现有的

并设置其文本.

其他框架不操作DOM；他们从数据中生成它，并在数据发生变化时重新生成它(例如在 Ajax 调用之后).

问题是，jQuery 不知道 React 的存在和动作，而 React 也不知道 jQuery 的存在和动作.

这必然会导致应用程序损坏，充满黑客和变通方法，无法维护，更不用说您必须加载两个库而不是一个.

例如，jQuery 将选择一个 并将其添加一个 .click() 侦听器；但是一秒钟之后，React/Angular/Vue 可能会在此过程中重新生成 DOM 和按钮，从而使 jQuery 的 .click() 无效.所以你会在 Stackoverflow 上问一个问题，想知道为什么你的 .click() 不起作用.您最终会添加一个脏的 setTimeout() hack，以便延迟 jQuery 的 click() 处理程序附件，直到 React 重新生成您的按钮之后.这是一条直通地狱的高速公路.

解决方案:使用 jQuery 或 (React/Angular/Vue)，不要同时使用.

I am trying to work on a project which is using a Layout/Template which uses a lot of 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.

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;
           });

    });

}

This is my Render Function.

{/* <!--- 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?

No. No approach is correct and there is no right way to use both jQuery and React/Angular/Vue together.

jQuery manipulates the DOM by, for example, selecting elements and adding/deleting stuff into/from them. Typically, it selects an existing <div> and sets its text.

The other frameworks don't manipulate the DOM; they generate it from data, and regenerate it whenever this data changes (for instance after an Ajax call).

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.

For instance, jQuery will select a <button> and add it a .click() listener; but a split second later, React/Angular/Vue might regenerate the DOM and the button in the process, voiding jQuery's .click(). So you'll ask a question on Stackoverflow, wondering why the heck does your .click() not work. You'll end up adding a dirty setTimeout() hack, in order to delay jQuery's click() handler attachment until after React has regenerated your button. It's straight up your highway to hell.

Solution : use jQuery OR (React/Angular/Vue), not both together.

这篇关于在 React 中使用 Jquery 的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！