4

我正在构建一个 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 元素是<a>Link 组件在第一次渲染中生成的标签。
我还检查过，如果我不使用 Link 组件（例如，使用简单的<a>标签），异常就会消失。有什么想法吗？

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

4

1 回答 1

4

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

我在一个 gist中创建了一个简化的示例，我正在使用这个版本。

在要点中，有一个<Page>组件会SYNC立即调度一个动作，然后DONE在 100 毫秒后调度一个动作，该动作会更改render()以显示加载指示器。加载后，该组件正在渲染一些条件元素，其中一个<Link>是导致相同的 Invariant Violation 的。

最初我是从页面的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或<a>）与处理程序一起使用时，我能够重新创建相同的错误onClick。

于 2016-01-29T19:34:12.607 回答