Блог

Я пытаюсь отобразить компоненты внутри другого компонента следующим образом. Даже когда я пытаюсь отобразить элементы div в компоненте, они не отображаются.

 const Sandbox = () => {

return (
<div>
<RenderHtml
Title="This is the title"
        Description="This is the description">
<Example message="Hello World" />
        <h1>Render somthing here</h1>
</RenderHtml>
</div>

 );
};

export default Sandbox;
 

Ниже приведен код для компонента RenderHtml

 const MyCard = styled(Card)();
const RenderHtml = (props: any) => {
return (
<MyCard>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          flexDirection: "column",
        }}
      >
<Typography variant="h1" sx={{ textAlign: "center" }}>
{props.Title}
        </Typography>
<Typography variant="subtitle1" sx={{ textAlign: "center" }}>
 {props.Description}
        </Typography>
      </div>
    </MyCard>
  );
};

export default RenderHtml;
 

Я просмотрел различные примеры и учебные пособия, не мог понять, как я могу визуализировать. Если бы кто-нибудь мог помочь мне с этим, пожалуйста.

Когда вы визуализируете компоненты внутри другого компонента, они передаются внешнему компоненту в качестве опоры children . Чтобы внутренние компоненты имели какой-либо эффект, внешнему компоненту необходимо что-то сделать с children опорой, чего ваш RenderHtml компонент в настоящее время не делает.

Например, если вы хотите, чтобы дочерние элементы отображались после заголовка, но внутри div, вы можете сделать это:

 const RenderHtml = (props: any) => {
  return (
    <MyCard>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          flexDirection: "column",
        }}
      >
        <Typography variant="h1" sx={{ textAlign: "center" }}>
          {props.Title}
        </Typography>
        <Typography variant="subtitle1" sx={{ textAlign: "center" }}>
          {props.Description}
        </Typography>
        {props.children}
      </div>
    </MyCard>
  );
};
 

Вам нужно добавить {props.children} в компонент, если вы хотите отобразить то, что находится внутри, вот так:

для Компонент1

 const Test=(props)=>{
    return <>
    {props.children}
    </>
}
 

для Компонент2

 const Test2=(props)=>{
    return <>
    {props.children}
    </>
}
 

для App.js

    <Test>
     <Test2>
       asd
     </Test2>
   </Test>