关键部分是:@H_301_2@
position: function() { var container = $(this.getDOMNode()); this._menu = $(this.refs.menu.getDOMNode()); this._menu.appendTo(document.body). offset({ top: container.offset().top + container.outerHeight(),left: container.offset().left }); },restore: function() { this._menu.appendTo(this.getDOMNode()); },componentWillUpdate: function() { this.restore(); },componentDidUpdate: function() { this.position(); },componentDidMount: function() { this.position(); },
这工作伟大的现在。我把组件更新之前的内容,假设React在更新之间单独保留DOM,不会错过它。事实上,React似乎对移动内容很好(如果我删除componentWillUpdate和componentDidUpdate,定位的元素仍然更新!)@H_301_2@
我的问题是有多少结果假设是安全的(即,如果我假设这些事情,我的代码会在React的未来版本中打破?):@H_301_2@
> React不关心DOM是否在更新之间移动,只要将它放回componentWillUpdate即可。
> React事件处理程序仍然可以处理已经移动的元素。
> React将合并任何内联样式,它使用元素上已有的样式(即使它没有设置它们)。
> React会更新它呈现的DOM,即使你将DOM移动到文档中的其他位置也是如此!@H_301_2@
最后一个似乎有点极端,神奇的我,但有一些很大的影响,如果它持有。@H_301_2@
React does not care if DOM is moved around between updates as long as you put it back in componentWillUpdate.@H_301_2@
True – React不会查看DOM,除非更新时,除了事件处理程序:@H_301_2@
React event handlers will still work on elements that have been moved.@H_301_2@
我不会依赖这个,我不知道它现在甚至是真的。@H_301_2@
React will merge any inline styles you ask it with styles already on the element (even if it did not set them.)@H_301_2@
我也不会依赖这个 – 现在React设置单个属性,但我可以很容易想象它设置el.style.cssText如果这是更快,这将吹走你所做的个人更改。@H_301_2@
React will update DOM it has rendered,even if you move that DOM somewhere else in the document!@H_301_2@
我不相信这是真的目前,你也不应该依赖于这一点。@H_301_2@
一般来说,你不应该手动操作React创建的DOM。创建一个空的< div>是100%的犹太教在React和手工填充它;甚至可以修改React渲染的元素的属性,只要你以后不尝试在React中改变它的属性(使React执行DOM更新),但是如果你移动一个元素,React可能会寻找它,当它找不到它时会感到困惑。@H_301_2@
希望有帮助。@H_301_2@