Question

我正在react-rails使用Fluxxor和React。只要我停留在同一页面上，我的组件就会完全正常运行。

但是，如果我通过单击其他链接更改页面并返回到我的组件，当我尝试使用setState时，它会抛出错误：

Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.

我的实际代码可以找到here。问题似乎是setState方法here。也许我的refs组件的Chosen attribut无法重新呈现？可能由Turbolink？

引起

Answer 1

我认为这是Chosen组件实现中的一个问题。

当它被赋予新道具时，React重新呈现它并在页面中放置新节点。但是，$.fn.chosen已经被实例化，并且它已经附加到不在页面中的DOM节点上了。我怀疑，在此过程中的某个地方，即使在卸载之后，也会保留对旧节点和组件的引用。

我在使用select2和React时遇到了同样的问题。我发现Ryan Florence的jQuery + React指南非常有帮助：

我们需要一种方法来停止使用React进行渲染，执行jQuery对话框工作，然后再次使用React进行渲染。有些人称这些为“门户”。你为React打开一个门户网站，跳过一些老式的DOM东西，然后继续前进。

最大的诀窍是渲染一切，然后在组件内部调用React.renderComponent。
var Dialog = React.createClass({
  render: function() {
    // don't render anything, this is where we open the portal
    return <div/>;
  },
  componentDidMount: function() {
    var node = this.getDOMNode();    
    // do the old-school stuff
    var dialog = $(node).dialog().data('ui-dialog');
    // start a new React render tree with our node and the children
    // passed in from above, this is the other side of the portal.
    React.renderComponent(<div>{this.props.children}</div>, node):
  }
});

来源https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md

setState导致Invariant Violation addComponentAsRefTo

1 个答案: