javascript - React.createElement : type should not be null, 未定义、 bool 值或数字。它应该是一个字符串(对于 DOM 元素)或一个 ReactClass

Question

一开始我会说我知道有类似的问题，但遗憾的是我在那里找不到任何答案..因为大部分主题都是关于 getInitialState 问题我在这里努力尝试从具有 id、name 和 surname 的数组中获取数据到 View 。似乎除了错误部分之外几乎可以正常工作，它不会渲染它我在控制台中得到的错误描述:

React.createElement: type should not be null, undefined, boolean, or number. 
It should be a string (for DOM elements) or a ReactClass (for composite components). 
Check the render method of `Reapeter`.

它与像 .toString() 这样的指定有什么关系吗？或者其他的东西。说实话，我不知道，我是一个 React 新手。

var Reapeter = React.createClass({
render: function(){
    var foreach = this.props.data.map(function(HeaderMiniComment){
        return(
            <HeaderMiniComment name={HeaderMiniComment.name} surname={HeaderMiniComment.surname} key={HeaderMiniComment.id}/>
        )
    });
    return(
        <div>
            {foreach}
        </div>
    );
}
});

@编辑如果缺少信息，请告诉我。我会努力带来更多@_@

@HeaderMiniComment

var HeaderMiniComment = React.createClass({
render:function(){
    return(
        <div>
            <span><p>{this.props.name}</p></span>
            <br />
            <span style={{color:'red'}}><p>{this.props.surname}</p></span>
        </div>
    )
}
});

Answer 1

对我来说，您应该仅在 props.data 中保留 HeaderMiniComment 的数据，并按此处实现映射(HeaderMiniComment 是外部组件)

var foreach = this.props.data.map(function(item){
    return(
        <HeaderMiniComment name={item.name} surname={item.surname} key={item.id}/>
    )
});

var HeaderMiniComment = React.createClass({
render:function(){
    return(
        <div>
            <span><p>{this.props.name}</p></span>
            <br />
            <span style={{color:'red'}}><p>{this.props.surname}</p></span>
        </div>
    )
}
});

data = [{id: 1, name: 'John', surname: 'Kennedy'}, {...}, ...];