是否可以将元素添加到 React 的虚拟 DOM 但使用 jQuery 附加到真实 DOM？答案

【问题标题】：Is it possible to add elements to React's Virtual DOM but use jQuery for append to the real DOM?是否可以将元素添加到 React 的虚拟 DOM 但使用 jQuery 附加到真实 DOM？
【发布时间】：2014-05-08 15:39:10
【问题描述】：

我正在使用一个名为 gridalicious 的 jquery 插件来以类似于拼贴的网格样式显示我的图像，这在第一次渲染时效果很好，当我在 componentDidUpdate 方法中调用它时，这会将样式应用于我的元素和正确显示它们...

现在的问题是，当我需要更新图库并添加新元素时，gridalicious 包含自己的方法来添加新元素，从而避免更改先前加载的图像的位置和大小......

$('#append').click(function(){
  $("#example3").gridalicious('append', makeboxes());
});

我最初的想法是将这些图像添加到我的状态中，React 会（并且实际上）很聪明地注意到只需要附加一些图像，然后再次运行库来自定义大小和位置。问题是，当我这样做时，我以前的图像已针对库进行了修改，并更改了它们的大小、外观甚至位置……注意，网格库应用了一些算法来确定哪些是最佳的大小、位置和排序顺序图像并显示它们以获得拼贴效果......

我想我需要避免 react 再次渲染图库（我猜是使用 shouldComponentUpdate）并使用 jquery 库添加我的新组件，我需要 react 的绑定，因为当我单击图像、信息和其他细节出现了，所以我真的需要反应的力量，但我需要找到一种方法来集成两个库，谢谢！！...

现在网站似乎关闭了，我希望它会尽快修复 suprb.com/apps/gridalicious/‎ 非常感谢！！！...

【问题讨论】：

您可能对我的回答感兴趣：stackoverflow.com/a/20035981/49485.
是的...似乎比我预期的要复杂，虽然 jquery 库的源代码很短，但我看不到集成如何与之反应...

标签： jquery reactjs

【解决方案1】：

您可以将 gridalicious 包含在 React 组件中，而不是在 componentDidMount 中附加到虚拟 DOM 之外，如类似的jQuery UI interop example 所示。

【讨论】：

【解决方案2】：

这类交互必须在 React 之外处理。当我必须做这些事情时，我使用生命周期方法componentDidMount 和componentDidUpdate 来使用jQuery 操作DOM。

【讨论】：