React不能从组件中渲染数组

React can't render array from component

本文关键字：数组 组件 不能 React      更新时间：2023-09-26

我有这个组件与一些菜单。这里有一些菜单项的数组迭代。我想把这个组件导入到另一个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} />

React组件不能返回数组…它必须返回一个元素。

将输出包装在DIV中可能会工作得很好:

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

组件需要被包装在根元素中。如果它是另一个类中的辅助函数，那么您的符号就可以了。

所以你的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)}
    ...)
}
相关文章：