React無法從組件渲染數組

Question

我有一些菜單此組件。 在這里，有一些菜單項的數組迭代。 我想將此組件導入其他main組件，但我收到此錯誤- A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. 。 當我刪除此數組迭代並保留簡單鏈接時，一切都很好。 怎么了？

零件：

const LandingMenu = (props) => {
    return (
        props.data.map((element, _) =>
            <Link class="link" href={ element.target }>{ element.name }</Link>
        )
    )
};

export default LandingMenu;

進口

<LandingMenu data={LANDING_CONTENT.menu} />

Answer 1

React組件無法返回數組……它必須返回單個元素。

將輸出包裝在DIV中可能會正常工作：

const LandingMenu = (props) => {
    return (
        <div>
            {props.data.map((element, _) =>
                <Link class="link" href={ element.target }>{ element.name }</Link>
            )}
        </div>
    )
};

export default LandingMenu;

Answer 2

組件需要包裝在根元素中。 如果它是另一個類中的輔助函數，則您的注釋會很好。

因此，您的LandingMenu需要如下所示：

return (
    <div>
        {props.data.map((element, _) =>
            <Link class="link" href={ element.target }>{ element.name }</Link>}
    </div>
    )
)

一種替代解決方案是在當前正在使用LandingMenu任何組件中都具有渲染幫助器功能

//SomeComponent
renderHelperFunction(data){
    return (
        {data.map((element, _) =>
            <Link class="link" href={ element.target }>{ element.name }</Link>}
    )
)

render(){
    return (...

          {this.renderHelperFunction(this.props.data)}

    ...)
}