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

【问题标题】：How to integrate mmenu jQuery plugin with ReactJS and Meteor如何将 mmenu jQuery 插件与 ReactJS 和 Meteor 集成
【发布时间】：2016-07-05 07:52:55
【问题描述】：

所以我们在这里，使用 Meteor 和 ReactJS 进行创新。这就是我所做的：

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

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

问题是，当Menu 组件呈现时，mmenu 插件移动相应的 DOM（nav 元素）超出了 React 范围（就在下面body 标记），因此当 user 对象（作为道具传递）发生更改时，React 在尝试重新渲染该不存在的组件时会感到困惑。

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 元素到主体，如下所示：

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

所以我的问题是：有没有办法做到这一点，以便 React 可以重新渲染组件而不会出错？

【问题讨论】：

标签： jquery meteor reactjs mmenu

【解决方案1】：

答案是，当你使用 React 时，根本不要使用 jQuery（和插件）。因为 React 处理它的虚拟 DOM。 jQuery Mmenu 操作 Real DOM，所以这不能一起工作，React 它不是为与 jQuery 一起工作而设计的。

检查一下，如果已经有一个 ReactComponent，你可以用它来解决你的任务。否则，如果您真的依赖 jQuery，那么使用 Blaze 可能会更好（就 Meteor 而言）

【讨论】：

嗨，我正在将我的应用程序从 Blaze 迁移到 React。 React 没有 mmenu 组件，所以如果我真的想使用 mmenu 插件是通过 jQuery。
mmenu 是一个 jquery 插件.. 这个怎么样：negomi.github.io/react-burger-menu
我试过了，但我无法让它工作。最后我用 mmenu 做了一些调整，告诉 react 不要重新渲染我们的组件，并直接用 jQuery 修改 dom。这并不理想，但至少它有效