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

Question

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

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

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

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

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

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

Answer 1

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