Как включить код карусели jQuery JS в компонент React

Question

У меня проблема с интеграцией этой простой карусели в мой компонент React:

https://codepen.io/Komeyl94/pen/vOaReR

А именно, я не могу понять, как интегрировать часть кода JS в свой React.

Я прочитал несколько тем и уже включил фрагмент кода jQuery в элемент DidComponentMount моего компонента, но как мне «нацелить» этот фрагмент кода на карусель?

Lookingв этом коде я предположил, что:

$('.flexslider').flexslider({
  animation: "slide",
  controlNav: false,
});

• мы берем каждый экземпляр класса .flexslider и затем добавляем его с пользовательским событием, которое добавляет «animation: slide» и «controlNav: false».

Я правильно понял?Как ни странно, смежный CSS не имеет ни «слайда», ни определения controlNav, так откуда эта функция получает исполняемый код?

import React, { Component } from 'react';
import {NavLink} from "react-router-dom";
import $ from 'jquery';



class Reja_S7_News extends Component {
  constructor(props) {
    super(props)
  }


  componentDidMount(){
    $('.flexslider').flexslider({
      animation: "slide",
      controlNav: false,
    });
  }




  render() {

    return (

      <div>
        <div className='row_outer'>
          <h1> Aktualności</h1>

          <div className='col-12'>

            <div className='row news_wrapper align-items-center justify-content-center'/>

            {/* Slider */}

            <div className="flexslider left">
              <ul className="slides">
                <li>
                  <img src="https://source.unsplash.com/BaCmEa2hy8g/1600x900"/>
                  <div className="meta">
                    <h1>Lorem ipsum dolor sit amet, consectetur.</h1>
                    <h2>Lorem ipsum dolor sit.</h2>
                    <div className="category">
                      <p>$286600</p>
                      <span>Category</span>
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://source.unsplash.com/RmZIUIF2S2Q/1600x900"/>
                  <div className="meta">
                    <h1>Lorem ipsum dolor sit amet, consectetur.</h1>
                    <h2>Lorem ipsum dolor sit.</h2>
                    <div className="category">
                      <p>$415000</p>
                      <span>Category</span>
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://source.unsplash.com/cFplR9ZGnAk/1600x900"/>
                  <div className="meta">
                    <h1>Lorem ipsum dolor sit amet, consectetur.</h1>
                    <h2>Lorem ipsum dolor sit.</h2>
                    <div className="category">
                      <p>$415000</p>
                      <span>Category</span>
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://source.unsplash.com/Ui8KQ0ahXBM/1600x900"/>
                  <div className="meta">
                    <h1>Lorem ipsum dolor sit amet, consectetur.</h1>
                    <h2>Lorem ipsum dolor sit.</h2>
                    <div className="category">
                      <p>$415000</p>
                      <span>Category</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>



          </div>
        </div>
      </div>
    )
  }
}

export default Reja_S7_News;

Answer 1

Если вы манипулируете DOM или частью DOM внутри реактивного компонента с помощью jQuery или другой сторонней библиотеки (карты Google), установите для метода жизненного цикла shouldComponentUpdate значение false, предотвращающее повторную визуализацию реагирующего DOM.Вы также можете использовать ref, чтобы выбрать целевой div.

1005 *