Reactjs 如何在父元素中指定应在子元素'；中循环的React元素；什么是JSX模板？

目前我正在学习ReactJS，我正在努力定义一个可重用的外部组件的概念，该组件由子元素组成，但可以被赋予一个子元素，该子元素应该替换其默认内容

本质上，我想了解如何从parents标签编写孩子的内容

<MyContainer1>
    // Uses default, row markup.
    <Table />
</MyContainer1>

<MyContainer2>
    <Table>
        // Replaces only the internal row markup but not the full template that comes with <Table />
        <MySpecialRow />
    </Table>
</MyContainer2>

//使用默认的行标记。
//仅替换内部行标记，而不替换随附的完整模板

我已经模拟了一个完整的JSBin示例，并将把可运行代码放在下面

MyTableContainer类扩展了React.Component{ 构造函数（）{ 超级（）； 此.state={ 标题：“我的榜样”， 标题：[ “第1列”、“第2列” ], 行：[ {文本：“第1行”，区域：“第1区”}， {文本：“第2行”，区域：“第2区”}， {文本：“第3行”，区域：“第3区”}， {文本：“第4行”，区域：“第4区”}， ] }; } 渲染（）{ 返回( {this.state.title} ); } } 类表扩展了React.Component{ 构造函数（props）{super（props）；} 渲染（）{ 返回( {this.props.headers.map（（header）=>{ 返回{header}； })} {this.props.rows.map（（row，i）=>）} ); } } 类行扩展了React.Component{ 构造函数（props）{super（props）；} 渲染（）{ 返回( {this.props.text} {this.props.area} ); } } //呈现具有特殊标记行的表的不同容器 //应该在行的循环中运行，并提供行的道具。 //除此之外，它现在应该能够处理给定的“actOnArea”函数 //从。 类MyTableContainer2扩展了React.Component{ 构造函数（）{ 超级（）； 此.state={ 标题：“我的例子2”， 标题：[ “第1列”、“第2列” ], 行：[ {文本：“第1行”，区域：“第1区”}， {文本：“第2行”，区域：“第2区”}， {文本：“第3行”，区域：“第3区”}， {文本：“第4行”，区域：“第4区”}， ] }; } actOnArea（区域、事件）{ event.preventDefault（）； console.log（'将一些人发送到'，区域）； } 渲染（）{ 返回( {this.state.title} ); } } //应是可交换的，如果作为的子级提供，则应使用而不是 //默认值 类MySpecialRow扩展了React.Component{ 构造函数（props）{super（props）；} 渲染（）{ 返回( {this.props.text} ); } } //初始化 ReactDOM.render( , document.getElementById（'root'）） );