Question

我正在构建一个Menu组件，该组件呈现使用react-router Link组件创建的链接列表。

这是呈现菜单中每个项目的代码：

  <li
  style={{opacity: this.props.isDragging ? 0 : 1}}
  className="list">
            <Link to={ this.props.list.url }
                  activeClassName="active"
                  className={ this.props.owner && 'draggable'}>
                <span>{ this.props.list.title }</span>
                { this.props.owner ?
                    <div className="list-controls">
                    <span className="glyphicon
                         glyphicon-pencil"
                        aria-hidden="true"
                    onClick={this.setEditMode.bind(this, true)}>
                    </span>
                    <span className="glyphicon
                         glyphicon-remove"
                    aria-hidden="true"
                    onClick={this.deleteList.bind(this)}></span>
                </div> : null
                }
            </Link>
        </li>;

菜单是动态的。这意味着导航到另一个URL可能会使用不同的链接列表重新呈现菜单。问题是当菜单重新渲染时，我得到以下异常：

Uncaught Error: Invariant Violation: findComponentRoot(..., .0.0.0.4.$12.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a '<tbody>' when using tables, nesting tags like '<form>, <p>, or <a>', or using non-SVG elements in an <svg>' parent. Try inspecting the child nodes of the element with React ID ``.

我已经检查过.0.0.0.4。$ 12.0元素是第一个渲染中Link组件生成的<a>标记。
我还检查过，如果我不使用链接组件（例如，使用简单的<a>标记），则异常消失。有什么想法吗？

更新：显然当我开始使用react-router-redux（以前称为redux-simple-router）时出现错误。

Answer 1

我在使用redux-simple-router（现在为react-router-redux）的项目上遇到了同样的问题，并且能够通过更改我用于调度操作的生命周期方法（我用于重新渲染）来修复它具有不同<Link>组件的组件。

我在a gist创建了一个简化示例，我使用了this revision。

在要点中有一个<Page>组件会立即发送SYNC操作，然后在100毫秒后执行DONE操作，更改render()以显示加载指示符。加载后，组件呈现一些条件元素，其中一个是<Link>，导致相同的不变违规。

最初我是在页面的componentWillReceiveProps生命周期方法中调度操作。当我将其更改为componentDidUpdate时，错误就消失了。这是我改变的相关代码：

- componentWillReceiveProps(nextProps) {
-   if (nextProps.params.param !== this.props.params.param) {
-      nextProps.dispatch(fetch())
-   }
- }

+ componentDidUpdate(prevProps) {
+   if (prevProps.params.param !== this.props.params.param) {
+     this.props.dispatch(fetch())
+   }
+ }

在旁注中，我注意到该错误并非仅用于重新呈现<Link>组件。当使用任何元素（如<span>或<a>）和onClick处理程序时，我能够重新创建相同的错误。

在动态菜单中使用链接组件时不变违规

1 个答案: