javascript - React.createElement:type不能为null，undefined，boolean或number。它应该是一个字符串(用于DOM元素)或ReactClass

一开始我会说我知道有类似的问题，但是可惜我在那里找不到任何答案..因为大多数主题都是关于getInitialState问题的
我在这里努力尝试从具有id,name and surname.的数组中获取数据到视图
似乎几乎不会出错的错误部分，它将无法呈现它
我在控制台中得到的错误描述：

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（）这样的指定有关系吗？或者其他的东西。老实说，我不知道，我是新手。

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>
    )
}
});

最佳答案

对我来说，您应仅将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'}, {...}, ...];

关于javascript - React.createElement:type不能为null，undefined，boolean或number。它应该是一个字符串(用于DOM元素)或ReactClass，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40225883/