如何将mmenu jQuery插件与ReactJS和Meteor集成

本文介绍了如何将mmenu jQuery插件与ReactJS和Meteor集成的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

因此，我们在这里进行Meteor和ReactJS的创新.这就是我所做的:

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

在我的client/lib/js/文件夹中复制了mmenu jQuery插件.
创建了一个名为Menu的组件，该组件在componentDidMount方法中具有 mmenu 插件初始化.
将React Menu放置在我的Layout组件中，因此这是检查树时React树在Chrome中的外观:

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>

问题是，当呈现Menu组件时， mmenu 插件移动在React范围之外的相应DOM(nav元素)(仅在下面) body标记)，因此当user对象(作为道具传递)更改时，React尝试重新渲染该组件时，React会感到困惑.

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.

Menu组件如下所示:

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>
    }
});

如您所见，调用menu.mmenu()函数时，插件将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>

所以我的问题是:有没有办法做到这一点，以便React可以无误地重新渲染组件?

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

real

如何将mmenu jQuery插件与ReactJS和Meteor集成

问题描述

推荐答案