Как подружить JQuery с React?

Question

[Владислав]

Столкнулся с проблемой - не работает навигация в приложении, а именно адаптивная версия(которая для открытия/закрытия использует JQuery.) Как заставить React обновить DOM при нажатии на меню?
Приложу исходники заранее.
Компонент навигации:

import React, {Component} from 'react';

import $ from "jquery";
function Nav(props){
    return(
    <nav>
        <a href="#" className="menu-trigger">Open menu</a>
        <div className="container">
            <div className="logo clearfix">
            <img src="img/logo.png" alt=""/>
        </div>
        <div className="nav__items">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">Contact us</a></li>
            </ul>
        </div>
        </div>
    </nav>
    );
}

export default Nav;

JQuery код:

$(document).ready(function() {
  $('.menu-trigger').click(function() {
    $('nav ul').slideToggle(500);
  });//end slide toggle
  
  $(window).resize(function() {		
		if (  $(window).width() > 500 ) {			
			$('nav ul').removeAttr('style');
		 }
	});//end resize
});//end ready

Comments

[Emjey]

а ты шалун

[Alexander Litvinenko]

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

Answer 1

[Роман Александрович]

Попробуйте так
https://jsfiddle.net/gmua11a5/

Comments

[Владислав]

"this.refs.ClickItem.slideToggle is not a function" пишет в ответ, в конструкторе пытался забиндить, пишет "Cannot read property 'bind' of undefined."
Я немного переделал код, так как он вообще не воспроизводился.

import React, {Component} from 'react';

import $ from "jquery";
class Nav extends Component{
    constructor(props){
        super();
        this.refs.ClickItem = this.refs.ClickItem.bind(this);
    }
    menuClick(){
        this.refs.ClickItem.slideToggle(500);
    }
    updateDimensions(){
        if ($(window).width()> 500){
        		this.refs.ClickItem.removeAttr('style');
        }
    }
    componentDidMount(){
        window.addEventListener("resize", this.updateDimensions)
    }
    componentWillUnmount() {
        window.removeEventListener("resize", this.updateDimensions);
    }
    render(){
    return(
    <nav>
        <a href="#" className="menu-trigger" onClick={()=>this.menuClick()}>Open menu</a>
        <div className="container">
            <div className="logo clearfix">
            <img src="img/logo.png" alt=""/>
        </div>
        <div className="nav__items">
            <ul  ref="ClickItem">
                <li><a href="#">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">Contact us</a></li>
            </ul>
        </div>
        </div>
    </nav>
    );
    }
}

export default Nav;

[Роман Александрович]

Vladislav, $(this.refs.ClickItem).slideToggle()

[Владислав]

Роман Александрович, спасибо! Только у меня не работало со slideToggle и я поменял на slideDown и всё работает