我正在使用一个名为 gridalicious 的 jquery 插件,以类似于拼贴的网格样式显示图像,这在第一次渲染中效果很好,当我在 componentDidUpdate 方法中调用它时,这会将样式应用于我的元素,并且正确显示它们...
现在的问题是,当我需要更新图库并添加新元素时,gridalicious 包含自己的方法来添加新元素,避免更改先前加载的图像的位置和大小......
$('#append').click(function(){
$("#example3").gridalicious('append', makeboxes());
});
我最初的想法是将这些图像添加到我的状态中,React 会(而且实际上)很聪明地注意到只需要附加一些图像,然后再次运行库来自定义大小和位置。问题是,当我这样做时,我之前的图像已针对库进行了修改,并更改了它们的大小、外观甚至位置...请注意,网格库应用一些算法来确定哪些是最佳大小、位置和排序顺序图像并显示它们以获得拼贴效果...
我想我需要避免react再次渲染图库(我猜是使用shouldComponentUpdate)并使用jquery库添加我的新组件,我需要react的绑定(bind),因为当我单击图像、信息和其他内容时细节出现了,所以我真的需要 react 的力量,但我需要找到一种方法来集成这两个库,谢谢!!...
现在该网站似乎已关闭,我希望它能尽快修复suprb.com/apps/gridalicious/非常感谢!!!...
最佳答案
此类交互必须在 React 外部处理。当我必须做这些事情时,我使用生命周期方法 componentDidMount
和 componentDidUpdate
来通过 jQuery 操作 DOM。
关于jquery - 是否可以将元素添加到 React 的虚拟 DOM,但使用 jQuery 附加到真实 DOM?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22725322/