2014-03-29 100 views
2

我使用所谓的gridalicious在类似拼贴网格样式显示我的图片一个jQuery插件,这款作品以第一渲染相当不错,当我把它在componentDidUpdate方法,此样式应用于我的元件和显示器他们正确...反应:是否可以添加到虚拟DOM的元素,但使用jquery追加到真正的DOM渲染?

现在的问题是,当我需要更新画廊和添加新的元素,gridalicious包括自己的方法来添加新的元素,避免以前加载的图像的位置和大小的变化......

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

我最初的想法是将这些图像添加到我的状态,React会(并且实际上)很聪明地注意到那里只需要追加几张图像,然后再次运行库以定制大小和位置。麻烦的是,当我这样做时,我以前的图像被修改为库,并改变它们的大小,外观和位置......注意比网格库应用一些算法来确定哪些是最佳尺寸,位置和排序顺序图像和显示他们获得拼贴效果...

我想我需要避免再次呈现画廊(使用shouldComponentUpdate我猜),并添加我的新组件使用jQuery的库,我需要绑定的反应,因为当我点击的图片,信息和其它细节出现,所以我需要真正的反应的权力,但我需要找到一种方式,如何集成这两个库,谢谢!! ...

刚才该网站似乎倒下了,我希望它会很快修复suprb.co m/apps/gridalicious /非常感谢!!! ...

+1

您可能对我的答案感兴趣:http://stackoverflow.com/a/20035981/49485。 –

+0

是...好像比这将是比我预期更为复杂,虽然jQuery的lib中的源代码很短,我不能看到如何整合它的反应... – user1050817

回答

0

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

2

这些交互必须在React之外处理。当我必须做这类事情我用生命周期方法componentDidMountcomponentDidUpdate操作使用jQuery的DOM。