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

标签 jquery reactjs

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

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

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

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

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

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

最佳答案

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

关于jquery - 是否可以将元素添加到 React 的虚拟 DOM,但使用 jQuery 附加到真实 DOM?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22725322/

相关文章:

javascript - 使用 React-static 创建站点时出现错误 Cannot find module 'perf_hooks'

java - native react :android.view.WindowManager $BadTokenException

jquery - 声音加载后,JQUERY更改属性

javascript - 在数据表变量中转义单引号

javascript - 选中列表中的复选框

javascript - Mapbox 将值附加到 map 单击的表单中

javascript - 将字段 id 作为变量传递给 javascript 函数时出错

android - 使用 RN 使用条件语句隐藏元素

javascript - 在嵌套组件中更新状态的正确方法

javascript - 更改reactJs父组件中的状态并不会更改react子组件中的props