如何将反应组件作为变量传递给子组件？

Posted 2023-02-22

【中文标题】如何将反应组件作为变量传递给子组件？

【英文标题】：How to pass a react component as a variable, to child component?

【发布时间】：2020-01-22 16:02:33

【问题描述】：

当我在变量中定义了一个组件，并尝试将它作为子属性传递给组件时，会显示Objects are not valid as a React child 错误。

这样做的正确方法是什么？

function AnotherComponent()
  return "Another";


function ChildComponent(props) 
  const  children, value, index, ...other  = props;

  console.log(children);
  return (
    <Typography
      component="div"
      role="tabpanel"
      hidden=value !== index
      id=`full-width-tabpanel-$index`
      aria-labelledby=`full-width-tab-$index`
      ...other
    >
      <Box p=3>children</Box>
    </Typography>
  );


function MainComponent()
  const tabItems = [
     "component": AnotherComponent
  ];

  const [value, setValue] = React.useState(0);

  return (
    <>
      tabItems.map((tabItem,index) => (
        <ChildComponent value=value index=tabItem.index>
          tabItem.component
        </ChildComponent>
      ))
    </>
  )

【参考方案1】：

tabItem.component 只是一个对象。这应该有效：

tabItems.map((tabItem, index) => 
    const TheComponent = tabItem.component;
    return (
      <TabPanel value=value index=tabItem.index>
        <TheComponent />
      </TabPanel>
    );
  )

【讨论】：

或者不改变他的代码： "component":AnotherComponent 变成 "component": <AnotherComponent /> 因为他的循环的重点是能够传递那个“tabItem”

这似乎不起作用——虽然这段代码没有呈现AnotherComponent，但错误是不可见的。 ` tabItems.map((tabItem,index) => let TabComponent = tabItem.component; return TabPanel> ) `

TabPanel 是什么？问题可能在那里

嗯，TabPanel 应该是ChildComponent，更正了代码

它显示如下 - $$typeof: Symbol(react.element) key: null props: ref: null type: $$typeof: Symbol(react.forward_ref), displayName: “WithSnackbar(WithStyles(Clip))”，选项：...，渲染：ƒ，裸体：ƒ，... ....

【参考方案2】：

问题在于您初始化数组的方式实际上只是将一个函数分配给它。正如错误所说 - 你不能渲染一个函数。您必须将该函数包装到 JSX 语法中才能完成整个 React.createChild 事情。

所以只要改变这一行

 const tabItems = [
 "component": AnotherComponent
];

到这里：

 const tabItems = [
 "component": <AnotherComponent />
];

它会像魅力一样发挥作用。 :)