React使用map方法的时候遇到个奇怪的问题，请求高手知道

Question

class BlackBorderContainer extends React.Component {

        render(){

            console.log(this.props.children[0].props); //object

            this.props.children.map((val,i)=>{

                console.log(val);

                return <div key={i} className="black-board">{val.type}</div>

            })

        }

    }

    ReactDOM.render(

        <BlackBorderContainer>

            <div className='name'>My Name：Lucy</div>

            <p className='age'> My Age：<span>12</span></p>

        </BlackBorderContainer>,

        document.getElementById('example')

    )

我2个console打印出来的内容 可以看出有三个对象，那我这里{val.type}为什么还是错误的？

难道说是因为<BlackBorderContainer>组件内部的不对称，一个是div一个是p的缘故？

{className: "name", children: "My Name：Lucy"}

{$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: {…}, …}

{$$typeof: Symbol(react.element), type: "p", key: null, ref: null, props: {…}, …}

从中可以看出我最后return的时候 val是正确输出的，但是程序会报错

Uncaught Error: BlackBorderContainer.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Answer 1

看字面意思也是你的render函数没有返回值呀。你的return是map的。