Slider pro для проекта React

Question

Slider pro

Я хочу использовать Slider pro в своем приложении React. Я установил, но не смог импортировать

Какие-либо решения?

Я сделал это так:

1. npm установить Slider-Pro (я также установил jquery)
2. Импорт slider-pro на компоненте, как указано выше

    import React from 'react'
    import $ from 'jquery'
    import 'slider-pro/dist/js/jquery.sliderPro.min.js' //from node_nodules?

    export default class Home extends React.Component {
      componentDidMount(){
         console.log($("#my-slider")) // ok!
         $("#my-slider").sliderPro() // error: sliderPro is not function
      }
      render(){
         return(
            <div class="slider-pro" id="my-slider">
              <div class="sp-slides">
                <!-- Slide 1 -->
                <div class="sp-slide">
                  <img class="sp-image" src="path/to/image1.jpg"/>
                </div>
                <!-- Slide 2 -->
                <div class="sp-slide">
                  <p>Lorem ipsum dolor sit amet</p>
                </div>
                <!-- Slide 3 -->
                <div class="sp-slide">
                    <h3 class="sp-layer">Lorem ipsum dolor sit amet</h3>
                    <p class="sp-layer">consectetur adipisicing elit</p>
                </div>
             </div>
          </div>
         )
      }

    }

Answer 1

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

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

Сначала попробуйте поискать альтернативы (например: https://github.com/akiran/react-slick или https://www.npmjs.com/package/react-awesome-slider ).