ReactCompositeComponent.render()：必须返回一个有效的 ReactComponent。您可能返回了未定义、数组或其他一些无效对象答案

【问题标题】：ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid objectReactCompositeComponent.render()：必须返回一个有效的 ReactComponent。您可能返回了未定义、数组或其他一些无效对象
【发布时间】：2016-06-29 15:47:34
【问题描述】：

我在控制台中收到上述错误，即使我正确地返回了要呈现的组件。以下代码中errorTexts = ["email is invalid"]的值

if(@state.errorTexts.length>0)
            dangerouslySetInnerHTML: {
              __html: ReactDOMServer.renderToString(
                React.createElement AdminError, errorTexts: @state.errorTexts
              )
            }

AdminError 组件包含以下代码：

#app/assets/javascripts/components/adminerror.js.coffee
@AdminError = React.createClass

  getDefaultProps: ->
    errorTexts: []

  render: ->
    for errorText in @props.errorTexts
      dom.div
        className: 'help-block'
        errorText

这个组件的 JS 等价物是：

(function() {
  this.AdminError = React.createClass({
    getDefaultProps: function() {
      return {
        errorTexts: []
      };
    },
    render: function() {
      var errorText, i, len, ref, results;
      ref = this.props.errorTexts;
      results = [];
      for (i = 0, len = ref.length; i < len; i++) {
        errorText = ref[i];
        results.push(dom.div({
          className: 'help-block'
        }, errorText));
      }
      return results;
    }
  });

}).call(this);

从 AdminError 组件返回的结果值显示在下面的屏幕截图中，但是，我不确定返回的对象类型是否可以接受，因为它在 for 循环中：

更新： 修改了 AdminError 组件中的代码来修复这个error

#app/assets/javascripts/components/adminerror.js.coffee
@AdminError = React.createClass

  getDefaultProps: ->
    errorTexts: []

  render: ->
    dangerouslySetInnerHTML: {
      __html: marked((
        dom.div null,
          for errorText, index in @props.errorTexts
            dom.div
              key: index
              className: 'help-block'
              errorText

      ).toString())
    }

又遇到这个错误：

Uncaught Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.invariant

【问题讨论】：

标签： javascript ruby-on-rails-4 coffeescript react-rails

【解决方案1】：

React 只接受一个从渲染返回的父元素。从代码看起来你要返回几个。试试这个：

// your code ...
return (
   <div>
     {results}
   </div>
)

我不太确定咖啡脚本中的内容，但基本思想是您需要将返回值包装在单个父元素中。

【讨论】：

即使我不确定如何在咖啡中做到这一点，让我试试！
我刚刚修复了这两个错误，现在又出现了。 Warning: input is a void element tag and must not have children or use props.dangerouslySetInnerHTML.warningUncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {dangerouslySetInnerHTML}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.

【解决方案2】：

render 方法不能返回多个元素，它必须只返回一个。所以将列表包装在另一个 DOM 元素中：

render: ->
  dom.div null,
    for errorText in @props.errorTexts
      dom.div
        className: 'help-block'
        errorText

【讨论】：

这行得通，但现在在父组件中还有其他一些其他的东西一直在工作:(
我刚刚修复了这两个错误，现在又出现了。 Warning: input is a void element tag and must not have children or use props.dangerouslySetInnerHTML.warningUncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {dangerouslySetInnerHTML}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.