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

Question

我正在速成班的帮助下学习React。我在学习嵌套组件和道具时感到有些困惑。我正在做一小段评论。

喜欢





在这里，我使用了两个组件 CommentDetail.js ，其中将显示用户名，图像和注释，以及 ApprovalCard.js ，用于批准用户的注释（批准/拒绝）。 ）。
CommentDetail此处是ApprovalCard的子组件。

讲师告诉我们，当我们将组件嵌套时，父组件会在props中接收对象。并且此props包含属性{{1} }。我们无法理解的是，当我在{strong> ApprovalCard.js 子级中children本身是props内部的对象时，因为对象无法在JSX中进行渲染，比{{1 }}在这里工作？


Index.js

console.log(props)

CommentDetail.js

{props.children}

ApprovalCard.js

import React from 'react';
import ReactDOM from 'react-dom';
import faker from 'faker';
import CommentDetail from './CommentDetail';
import ApprovalCard from './ApprovalCard';

const App = () => {
    return  (
            <div className='ui comments'>
            <ApprovalCard>
                <CommentDetail author='Maximillian' timesAgo = 'Today at 4:00PM' comment = 'Nice blog post!'
                    image = {faker.image.avatar()}/>
            </ApprovalCard>
            <ApprovalCard>
                <CommentDetail author='Kishan' timesAgo = 'Today at 1:00AM' comment = 'Touched every important point.'
                    image = {faker.image.avatar()}/>
            </ApprovalCard>
            <ApprovalCard>
                <CommentDetail author='Punit' timesAgo = 'Today at 6:32PM' comment = 'Far better than any other article I have come across'
                    image = {faker.image.avatar()}/>
            </ApprovalCard>
            </div>
    );
};

ReactDOM.render(<App/>,document.querySelector('#root'));

Answer 1

您的代码包含以下<ApprovalCard>组件，其中包含一个<CommentDetail>子组件：

<ApprovalCard>
    <CommentDetail author='Maximillian' timesAgo = 'Today at 4:00PM' comment = 'Nice blog post!' image = {faker.image.avatar()} />
</ApprovalCard>

从技术上讲，props.children将是<CommentDetail>组件，它在以下语句中可以呈现为JSX，因为它不仅仅是一个简单的对象：

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

从Composition vs Inheritance文档中特别检查containment部分，其中指出：

某些组件提前不认识自己的孩子。这对于侧栏或对话框之类的代表通用“框”的组件尤其常见。

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

我希望这会有所帮助！