Каков правильный способ использования JQuery в реактиве?

Я пытаюсь работать над проектом, который использует макет / шаблон, который использует много jQuery.

Я научился интегрировать шаблон с проектом ReactJS, однако, я ищу решение, где я могу полностью заменить jQuery.

Одно из моих решений - использовать функции jQuery внутри ComponentDidMount()или Render()функции React.

Правильно ли этот подход? Правильно ли это?

Ниже я приведу небольшой пример:

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>

javascript,jquery,reactjs,

0

Ответов: 2


1 принят

Правильно ли этот подход? Правильно ли это?

Нет. Правильный подход не подходит, и нет правильного способа совместного использования jQuery и React / Angular / Vue.

Причина в том, что jQuery управляет DOM, например, путем выбора элементов и добавления / удаления файлов в / из них.

Другие структуры не манипулируют DOM, они генерируют его из данных и регенерируют, когда данные изменяются.

Проблема в том, что jQuery не имеет понятия о присутствии и действиях React, и React не имеет понятия о присутствии и действиях jQuery. Это обязательно приведет к сломанному приложению, полному хаков и обходных решений, недостижимым, не говоря уже о том, что вам нужно загрузить две библиотеки, а не одну.

Решение: используйте jQuery OR React, а не оба вместе.


1

Правильно ли этот подход? Правильно ли это?

Нет. Не используйте jQuery для присоединения прослушивателей событий к элементам DOM, созданным и управляемым React. Используйте onClick'. I could not find# sidebarCollapse` в своем фрагменте. Это может выглядеть примерно так.

<button id="sidebarCollapse" onClick={state => this.setState({ collapsed: !state.collapsed })>Collapse</button

И класс для <nav id="sidebar">может зависеть от этого состояния

<nav id="sidebar" className={ this.state.collapsed ? "": "active" } >

Вы заметите, что вы выполняете текущие операции, такие как добавление удаления класса, атрибутов и других операций DOM в React, и просто объявляете, как вещи должны реагировать на изменения состояния. В этом случае, если вы попытаетесь запустить jQuery-операции, ваш пользовательский интерфейс, вероятно, может оказаться в несогласованном состоянии.

Миграция может быть выполнена следующим образом: замените части элементов интерфейса на React. Например, изначально вы могли бы сделать это,

<!-- rest of your existing jQuery based code -->
<header id="reactManagedNavbar">
  <!-- Nothing here. React will take care of DOM Elements here -->
</header>
<!-- rest of your existing jQuery based code -->

И сторона Реакта может выглядеть так,

// main.js
ReactDOM.render(<MyNavBar />, document.getElementById('reactManagedNavBar'))

// MyNavBar.js could have the react components

Таким образом, вы можете постепенно перейти на React и по-прежнему иметь jQuery бок о бок. Просто не манипулируйте друг другу элементами DOM.

Иногда вам нужен плагин jQuery (анимации, графики визуализации и т. Д.) Внутри компонента React. Использовать refs!

class MyJQueryDependingComp extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  componentDidMount() {
    // this.myRef.current is the dom element. Pass it to jQuery
  }
  render() {
    return (
       {/* rest of React elements */}
       <div ref={this.myRef} />
       {/* rest of React elements */}
    );
  }
}

Опять же, воздержитесь от прикосновения к DOM jQuery в React и наоборот.

JavaScript, JQuery, reactjs,
Похожие вопросы