反应 css 转换抛出无效组件错误答案

【问题标题】：React css transition throwing invalid component error反应 css 转换抛出无效组件错误
【发布时间】：2015-12-02 07:41:22
【问题描述】：

现在已经为此苦苦挣扎了几个小时。我正在尝试使用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 是一个有效的元素数组，当我取出动画时呈现良好。

有什么想法吗？

更新

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

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

【问题讨论】：

您是否尝试过将ReactCSSTransitionGroup 放在父级div 之上并将这个div 放入其中，这样您的最顶层元素就变成了ReactCSSTransitionGroup？
另外，你能分享一下你的buildDataSection里面发生了什么吗（不妨分享整个代码）？
将其设为父母不会做任何事情，我仍然遇到同样的错误。有趣的是，我发现如果我使用已弃用的：var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 而不是使用 require('react-addons-css-transition-group') 来要求它，它可以正常工作...
有趣。很高兴它解决了您的问题。

标签： reactjs css-transitions

【解决方案1】：

好吧，我想通了，我是个傻瓜。

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

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

【讨论】：