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

Posted 2023-02-21

【中文标题】是否可以将元素添加到 React 的虚拟 DOM 但使用 jQuery 附加到真实 DOM？

【英文标题】：Is it possible to add elements to React's Virtual DOM but use jQuery for append to the real 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/‎ 非常感谢！！！...

【问题讨论】：

您可能对我的回答感兴趣：***.com/a/20035981/49485.

是的...似乎比我预期的要复杂，虽然 jquery 库的源代码很短，但我看不到集成如何与之反应...

【参考方案1】：

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

【参考方案2】：

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