使用某些React-Bootstrap组件导致不变违规

我刚刚升级到React Bootstrap v。0.27.1，React v。0.14.0和React Router v。1.0.0-rc3，现在我得到一个不变侵犯当我使用某些React引导组件。使用某些React-Bootstrap组件导致不变违规

Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: 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>其正常引导标记修复该问题。同样，当我添加一个<Input>组件。可能还有其他组件导致事情中断，但我只是缩小到了这两个。

在任何情况下，我无法弄清楚为什么会发生这些与这些组件发生而不与其他人和任何帮助，将不胜感激。

来源

2015-10-11 Juan Carlos Farah

我在react-bootstrap repo中打开了this issue，有人指出这不是React Bootstrap特有的，但它是因为两个React副本被加载而引起的。看起来，Browserify造成了这种情况，因为我可以通过将browserify-resolutions添加到我的构建过程来解决此问题。由于我使用Gulp，我的大文件最终包含了下面的两个任务。请注意，使用.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')); 
});

来源

2015-10-12 09:57:47

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

这产生了去除react-dom下的React 0.14.0包含的依赖关系（导致构建时重复）的效果。我想知道是否可能已经使用扁平化文件夹结构下降到最新的NPM，该文件夹结构会在层次结构中自动删除。

之后，我没有任何问题，根本不需要使用browserify-resolution。

来源

2015-10-13 12:08:32

使用某些React-Bootstrap组件导致不变违规

回答

相关问题