映射指向组件的导入对象时出现错误“对象作为 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() {

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

}

Note:将第一个字母设为大写，因为component它不是本机元素，这会引发错误。