React.js和Isotope.js

问题描述

我正在查看并尝试弄清楚这个库如何与。
React的文档说它可以很好地与其他库一起使用，但是将它与自己更改DOM的库一起使用似乎没有使用React的感觉。

I'm checking out React.js and trying to figure out how this library can work together with Isotope.js.The documentation of React says that it plays nicely with other libraries, but using it with library that changes DOM on its own seems like no sense of using React.

有人可以向我解释，如何在我使用Isotope.js作为布局的webapp中利用React？

Can someone explain to me, how can I take advantage of React in my webapp that uses Isotope.js as layout ?

推荐答案

你可以直接在React中操作dom。这允许集成现有的JS库或React无法很好地处理的自定义需求。

You can manipulate the dom directly inside React. This permits to integrate existing JS libraries or for custom needs not handled well by React.

你可以在这里找到一个例子：

You can find an exemple here:

这就是它的样子：

React与像Isotope这样的库集成的问题是你最终会遇到2个不同的问题库试图更新相同的dom子树。由于React使用差异，它假设它是单独使用dom。

The problem with integration of React and a library like Isotope is that you will end up having 2 different libraries trying to update the same dom subtree. As React work with diffs, it kind of assumes that it is alone modyfing the dom.

所以想法可能是创建一个只渲染一次的React组件，永远不会自我更新。您可以通过以下方式确保：

So the idea could be to create a React component that will render only one time, and will never update itself. You can ensure this with:

shouldComponentUpdate: function() {
    return false;
}

有了这个，你可以：

• 使用React生成同位素项html元素（您也可以在没有React的情况下创建它们）


• On componentDidMount ，初始化由React挂载的dom节点上的同位素

• Use React to generate your isotope item html elements (you can also create them without React)
• On componentDidMount, initialize isotope on the dom node mounted by React

这就是全部。现在React永远不会再次更新dom的这一部分，并且Isotope可以自由地操纵它而不会干扰React。

And that's all. Now React will never update this part of the dom again, and Isotope is free to manipulate it like it wants to without interfering with React.

此外，就我而言理解，Isotope并不打算与动态项目列表一起使用，因此有一个永不更新的React组件是有意义的。

In addition, as far as I understand, Isotope is not intented to be used with a dynamic list of items so it makes sense to have a React component that never updates.

这篇关于React.js和Isotope.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！