How to integrate mmenu jQuery plugin with ReactJS and Meteor

So here we are, innovating with Meteor and ReactJS. This is what i did:

Copied the mmenu jQuery plugin inside my client/lib/js/ folder.
Created a component called Menu which has the mmenu plugin initialization in the componentDidMount method.
Placed the React Menu in my Layout component, so this how the React tree looked in Chrome when inspected:

<Layout> <Menu user={this.data.user} /> <Home /> </Layout>

Problem is, when the Menu component renders, the mmenu plugin moves the corresponding DOM (the nav element) outside of React scope (just bellow the body tag), so React get confused when referencing that unexistent component when it tries to re-render it when user object (passed as props) changes.

The Menu component looks like this:

Menu = React.createClass({
    componentDidMount(){
        const menu = $(this.refs['mmenu']);
        menu.mmenu({ /* some options here */ });
    }
    render(){
        <nav id="menu" ref="mmenu">
            { this.props.user ? <HomePublic/> : <HomePrivate/> }
        </nav>
    }
});

As you can see, when invoking menu.mmenu() function, the plugin moves the nav element to the body, which looks like this:

<body>
  <nav ...> </nav>
  <div id="react-root"> ... </div>
</body>

So my question is: Is there a way to do this so React can re-render the component without errors?

The answer is, not to use jQuery at all (and the plugins), when you are using React. Because React Handles its Virtual DOM. jQuery Mmenu manipulates the Real DOM, so this will not work together and React it is not designed to work with jQuery.

Check out, if there is a already a ReactComponent, which you could use to solve you task. Otherwise, if you really depend on jQuery, you are maybe better with Blaze (in terms of Meteor)

来源：https://stackoverflow.com/questions/36086425/how-to-integrate-mmenu-jquery-plugin-with-reactjs-and-meteor

标签

jquery

meteor

reactjs

mmenu