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

    ...)
}