ReactCompositeComponent.render（）：必须返回有效的ReactComponent。您可能已经返回了未定义的数组或其他无效的对象

Question

即使我正确地返回要呈现的组件，但在控制台中出现上述错误。在下面的代码

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

而AdminError部件 价值errorTexts = ["email is invalid"]包含以下代码段：

#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循环：

UPDATE： 修改了代码中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 

Answer 1

render方法不能返回多个元素，它只能返回一个。因此，将该列表包装在另一个DOM元素中：

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

Answer 2

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

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

我真的不知道是什么将是咖啡的脚本，但其基本思想是，你需要用你在一个单一的父元素的回报。