Как передать реагирующий компонент как переменную дочернему компоненту? - PullRequest
Новая
       12

Как передать реагирующий компонент как переменную дочернему компоненту?

2 голосов
/ 22 сентября 2019

Когда я определил компонент в переменной и пытаюсь передать его компоненту в качестве дочернего объекта, появляется ошибка 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>
      ))}
    </>
  )
}

Ответы [ 2 ]

4 голосов
/ 22 сентября 2019

tabItem.component это просто объект.Это должно работать: 

{tabItems.map((tabItem, index) => {
    const TheComponent = tabItem.component;
    return (
      <TabPanel value={value} index={tabItem.index}>
        <TheComponent />
      </TabPanel>
    );
  })}
0 голосов
/ 22 сентября 2019

Проблема в том, как вы инициализируете массив, просто назначая ему функцию.Точно так же, как говорит ошибка - вы не можете выполнить функцию.Вы должны заключить эту функцию в синтаксис JSX, чтобы выполнить всю React.createChild вещь.

Так что просто измените эту строку 

 const tabItems = [
{ "component": AnotherComponent}
];

на эту: 

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

и это будет работать как шарм.:)

...