Question

我刚升级到React Bootstrap v.2.27.1，React v.0.14.0和React Router v.1.0.0-rc3，现在我在使用时遇到不变违规某些React Bootstrap组件。

未捕获错误：不变违规：addComponentAsRefTo（...）：只有ReactOwner可以有refs。您可能正在向未在组件的render方法内创建的组件添加引用，或者您已加载多个React副本（详细信息：https://fb.me/react-refs-must-have-owner）。

具体来说，当我使用<Input>和<Nav>组件时，我会看到这一点。所以我得到以下行为。

// Does NOT work.
// --------------
<Navbar>
    <Nav bsStyle="pills" activeKey={1}>
        <NavItem eventKey={1} href="/">Home</NavItem>
    </Nav>
</Navbar>

// Works
// -----
<Navbar>
    <ul className="nav nav-pills">
        <NavItem eventKey={1} href="/">Home</NavItem>
    </ul>
</Navbar>

如您所见，将<Nav>切换到常规的Bootstrap标记可以解决问题。添加<Input>组件时也一样。可能有其他组件导致事情中断，但我只是将其缩小到这两个。

在任何情况下，我都无法弄清楚为什么会出现这些组件而不是其他组件，我们将不胜感激。

Answer 1

我在react-bootstrap repo中打开了this issue，有人指出这不是React Bootstrap特有的，但是它是因为加载了两个React副本而引起的。似乎Browserify导致了这一点，因为我能够通过向我的构建过程添加browserify-resolutions来解决这个问题。由于我使用Gulp，我的gulpfile最终包括下面的两个任务。请注意，使用.plugin(resolutions, 'react')行调用browserify-resolution。

// Compile third-party dependencies separately for faster performance.
gulp.task('browserify-vendor', function() {
    return browserify()
        .require(dependencies)
        .plugin(resolutions, 'react')
        .bundle()
        .pipe(source('vendor.bundle.js'))
        .pipe(gulpif(production, streamify(uglify({ mangle: false }))))
        .pipe(gulp.dest('public/js'));
});

// Compile only project files, excluding all third-party dependencies.
gulp.task('browserify', ['browserify-vendor'], function() {
    return browserify('src/app.js')
        .external(dependencies)
        .plugin(resolutions, 'react')
        .transform(babelify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulpif(production, streamify(uglify({ mangle: false }))))
        .pipe(gulp.dest('public/js'));
});

Answer 2

感谢张贴胡安。我确实尝试过browserify-resolutions，但它完全拒绝在捆绑包中重复使用React的两个副本。最后，我通过删除整个node_modules文件夹并执行完整的npm重新安装来解决问题。

这具有在react-dom下面删除React 0.14.0包含依赖项的效果（这导致了构建上的重复）。我想知道这是否可能是使用扁平文件夹结构的最新NPM，它会自动在层次结构中进行重复数据删除。

在此之后我没有遇到任何问题，根本不需要使用浏览器解决方案。

Answer 3

如果出于任何原因你在这里寻找解决方案并且没有任何工作。如果您还在使用create-react-app，那么我建议您检查index.html文件中是否存在多个“已构建”的捆绑包，其中包含多个react或导致Invariant Violation错误的任何内容。希望它可以帮到某人。

使用某些React-Bootstrap组件会导致不变冲突

3 个答案: