在另一个组件中渲染一个组件

Question

我正在尝试通过以下方式在另一个组件内渲染组件。即使我尝试在组件中渲染 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;

我浏览了不同的示例和教程，无法理解如何渲染。如果有人可以帮我解决这个问题。

Answer 1

如果你想像这样渲染里面的内容，你必须将 {props.children} 添加到组件中：

组件 1

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

组件 2

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

对于App.js

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

Answer 2

当您在另一个组件内渲染组件时，这些组件会作为 prop children 传递给外部组件。为了使内部组件产生任何效果，外部组件需要使用 children 属性做一些事情，而您的 RenderHtml 组件目前没有这样做。

例如，如果您希望 children 在标题之后但在 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>
  );
};

在另一个组件中渲染一个组件

Rendering a component within another component

components

render

typescript

reactjs