Javascript {props.children}与普通对象有何不同？

我正在通过速成班学习如何应对。我在学习嵌套组件和道具时有些困惑。我在做一个小评论部分。

像这样






这里我使用了两个组件，CommentDetail.js其中将显示用户名、图像和评论，ApprovalCard.js，用于批准用户的评论（批准/拒绝）.
这里的CommentDetail是ApprovalCard的子组件。

讲师告诉我们，当我们嵌套组件时，父组件会在props中接收对象。这个props包含一个属性

children

，我们可以渲染它。我不理解的是当我

console.log（props）时
inApprovalCard.jschildren本身是props中的一个对象。由于对象无法在JSX中渲染，因此
{props.children}
在这里的工作方式？


Index.js

从“React”导入React；
从“react dom”导入react dom；
从“冒牌货”进口冒牌货；
从“/CommentDetail”导入CommentDetail；
从“./ApprovalCard”导入ApprovalCard；
常量应用=（）=>{
返回(
);
};
ReactDOM.render（，document.querySelector（'#root'）；

CommentDetail.js

从“React”导入React；
const CommentDetail=（道具）=>
{
控制台日志（道具）；
返回(
{props.author}
{props.timesAgo}
{props.comment}
);
};
导出默认注释细节；

ApprovalCard.js

从“React”导入React；
const ApprovalCard=（道具）=>{
console.log（props.children）；
返回(
{props.children}
批准
拒绝
);
};
导出默认批准卡；
您的代码包含以下
文档检查，尤其是说明以下内容的部分：

一些组件不知道他们的孩子提前。这对于表示通用“框”的边栏或对话框等组件尤其常见

我们建议此类组件使用特殊的子元素道具将子元素直接传递到其输出中

我希望这有帮助
 您的代码包含以下
文档检查，尤其是说明以下内容的部分：

一些组件不知道他们的孩子提前。这对于表示通用“框”的边栏或对话框等组件尤其常见

我们建议此类组件使用特殊的子元素道具将子元素直接传递到其输出中

我希望这有帮助
 您说
您的代码包含以下组件，该组件位于子级
内部。我认为不是这样。@user239887我的意思是
位于
内部，让我们更正那句话。你说
你的代码包含以下组件，该组件在子项中
。我认为不是这样。@user239887我的意思是
在
中，让我们更正那句话。
<ApprovalCard>
    <CommentDetail author='Maximillian' timesAgo = 'Today at 4:00PM' comment = 'Nice blog post!' image = {faker.image.avatar()} />
</ApprovalCard>

<div className="content">{props.children}</div>