Question

所以我们在这里，使用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可以重新渲染组件而不会出错？

Answer 1

答案是，当您使用React时，根本不使用jQuery（和插件）。因为React处理其虚拟DOM。 jQuery Mmenu操纵Real DOM，所以这不会一起工作而React它不适用于jQuery。

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

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

1 个答案: