Question

我有这个组件有一些菜单。在这里有一些菜单项的数组迭代。我想将此组件导入其他main，但我收到此错误 - 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)}

    ...)
}

React无法从组件渲染数组

2 个答案: