鍍金池/ 問答/HTML/ React使用map方法的時候遇到個奇怪的問題，請求高手知道

React使用map方法的時候遇到個奇怪的問題，請求高手知道

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.

回答
編輯回答
瘋子范

樓上說的對呢~

改成這樣就好了

        render(){
            console.log(this.props.children[0].props); //object
            return this.props.children.map((val,i)=>{
                        console.log(val);
                        return <div key={i} className="black-board">{val.type}</div>
                   })
        }

可以直接返回數(shù)組不用加Fragment
https://reactjs.org/blog/2017...

2017年5月30日 12:44
編輯回答
離夢

看字面意思也是你的render函數(shù)沒有返回值呀。
你的return是map的。

2017年10月13日 10:26