前言

昨天我们了解到如何透过 Props 来传递资料给子元件。而今天我们要来认识如何在元件中间包裹内容。

Props.children

function Card(props) {
    const classes = 'card ' + props.className; //必须这样撰写才能将原本Component上的 ClassName 加入
    return (
        <div className={classes}>{props.children}</div>
    )
}

说明：

我们过往都是透过 <div> 包裹一个物件，但是如果我们用自制元素来包裹的话，我觉得概念蛮像
是一个 Template ，目的是可以节省 css 或是 HTML 撰写。

参考资料

• 【React.js入门 - 10】 夹在中间的props: children
• A quick intro to React’s props.children