React css 转换抛出无效组件错误

Question

几个小时以来一直在努力解决这个问题。我正在尝试使用 react-css-transition-group 为数组中的元素设置动画。我有：

render: function(){
var dataSections = this.props.sections.map(this.buildDataSection);
return (
  <div>
    <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
      {dataSections}
    </ReactCSSTransitionGroup>
  </div>
);

}

它编译得很好，但是当我运行它时，我在我的控制台中得到 Uncaught Error: Invariant Violation: ReactCSSTransitionGroup.render(): A valid ReactComponent must be returned.。我不知道为什么。我试过回滚我的 react 和 react-css-transition-group 版本都无济于事。在这一点上我不知所措。

dataSections 是一个有效的元素数组，当我取出动画时渲染良好。

有什么想法吗？

更新

从那以后，我开始处理这个项目中的其他几件事，我意识到它不仅仅是这个包，它是任何导出组件的反应包。他们都抛出同样的错误：A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

我已经更新了包括 Browserify 在内的所有包，并且 React 已经是对等依赖项。不知道该怎么做:(

Answer 1

好吧，我想通了，我傻了。

在我开始使用 NPM 之前，我使用的是 react-rails gem，当我将所有内容移植到 Browserify 时，我从未取出旧的 gem。因此，我没有注意到组件文件顶部的几个不同地方我忘记了 require('react')，因为旧的 gem 在全局中提供了 React命名空间，因此它没有抛出错误。

长话短说，我同时拥有两个相互冲突的 React 运行版本。删除了 gem，修复了缺失的包含，问题消失了！

React css 转换抛出无效组件错误

React css transition throwing invalid component error

css-transitions

reactjs

更新