映射指向组件的导入对象时出现错误“对象作为 React 子对象无效”

Question

我在另一个文件中有一个数组，我在一个单独的组件中导入并映射该数组。被映射的属性之一称为component，是对另一个单独组件的引用。

我试图让组件渲染，但它在下面和标题中抛出错误：

Objects are not valid as a React child (found: object with keys {component}). If you meant to render a collection of children, use an array instead.

我环顾四周，并没有找到我想要的东西。我想做的事情可能吗？

我像这样导出数组：

import Component1 from "./Component1";

import Component2 from "./Component2";

export default [{ component: Component1 }, { component: Component2 }];

在我的组件中，我尝试将这些组件渲染为，

export default function App() {

  return <>{dict.map(({ component }) => component)}</>;

}

我尝试过做类似的事情。

export default [{ component: <Component1 /> }, { component: <Component2 /> }];

但这甚至无法编译。

我想另一个选择是在我的App组件中创建一个对象。就像是，

const componentMap = {

  Component1: <Component1 />,

  Component2: <Component2 />,

}

并将我的dict对象更改为，

export default [{ component: 'Component1' }, { component: 'Component2' }];

我想知道为什么我目前的方法不起作用。我在这里做错了什么？

Answer 1

您只是返回函数，但要渲染 JSX，您需要执行以下操作：export default function App() {&nbsp; return <>{dict.map(({ component: Component }) => <Component />)}</>;}Note:将第一个字母设为大写，因为component它不是本机元素，这会引发错误。