Reactjs 使用已传递组件的道具

我正在创建一个抽象网格，我的主要组件是a，该表有3个组件（如普通表），我可以选择是使用默认的TableBody、TableHeader或TableFooter，还是传入我自己的，例如

问题是如何将TableBody 2传递给并使用默认的TableBody组件之类的数据

下面是我如何定义要使用的组件（如果为null，则使用默认值）：

let模板={
标题：null，
正文：，
页脚：空

下面是我如何将组件传递到表：

<Table options={this.state.options} data={this.state.data} templates={templates}/>

我还不太明白我该如何访问inside的数据道具

决议： 在我的表组件中，我像这样调用我的组件（TableBody2）（this.props.templates.body（this.props）），并将表的props传递给它，以便我可以像这样访问数据

    function TableBody2(props){
  const tableData = props.data.map((data) => {
    return (
    <td key={data.userId}>{data.userId}</td>
  )
  });
  return (    
    <tbody>
    <tr>
    {tableData}
  </tr>
  </tbody>

  )
} 

功能表体2（道具）{
const tableData=props.data.map（（数据）=>{
返回(
{data.userId}
)
});
报税表（
{tableData}
)
} 

我必须诚恳地说，这个问题对我来说不是很清楚，但如果你问你如何访问组件（表）内的道具，那就是：

这个.props.templates

我必须诚恳地说，这个问题对我来说不是很清楚，但是如果你问你如何访问组件（表）内的道具然后就是：

this.props.templates

在您的接收组件中，您只需要使用

this.props.data

或

this.props.template

来访问数据。或者，您可以像这样尝试使用

组件WillReceiveProps（）

：

componentWillReceiveProps(nextProps) {
    console.log(nextProps);
}

---

或者在

constructor（props）

中，如果它只是一个一次性操作，则与上面的方法相同。

在接收组件中，您只需要使用例如

this.props.data

或

this.props.template

来访问数据。或者，您可以尝试使用

组件willreceiveprops（）

，如下：

componentWillReceiveProps(nextProps) {
    console.log(nextProps);
}

或者在

构造器（props）

中，如果它只是一次操作，则与上面的方法相同。

这里的pattern似乎是您的朋友。 render props模式的关键是：将

函数作为属性传递给组件，然后可以在
render（）中使用该函数

从官方文件：

渲染道具是组件用于了解渲染内容的函数道具

然后，您可以增强
表
组件，以便对渲染内容提供更细粒度的控制。
对于e.x.您可以定义您的
表
组件来接受3个渲染器操作，让我们称它们为
页眉
，
正文
，
页脚

表的渲染方法可以如下所示：

render() {
    {/* your main table code */}
    {this.prop.header && this.prop.header(this.prop.data)}
    {this.prop.body && this.prop.body(this.prop.data)}
    {this.prop.footer && this.prop.footer(this.prop.data)}
}

示例用法可以是：

<Table data={someData} 
       body={(data) => (<TableBody2 data={data} />)} />

（）}/>

您可以看一看，它惊人地使用了渲染道具来提供灵活性。
看起来pattern是您的朋友。
render props模式的关键是：将
函数作为属性传递给组件，然后可以在
render（）中使用该函数

从官方文件：

渲染道具是组件用于了解渲染内容的函数道具

然后，您可以增强
表
组件，以便对渲染内容提供更细粒度的控制。
对于e.x.您可以定义您的
表
组件来接受3个渲染器操作，让我们称它们为
页眉
，
正文
，
页脚

表的渲染方法可以如下所示：

render() {
    {/* your main table code */}
    {this.prop.header && this.prop.header(this.prop.data)}
    {this.prop.body && this.prop.body(this.prop.data)}
    {this.prop.footer && this.prop.footer(this.prop.data)}
}

示例用法可以是：

<Table data={someData} 
       body={(data) => (<TableBody2 data={data} />)} />

（）}/>

你可以看一看，它惊人地使用了渲染道具来提供灵活性。
编辑你的帖子，只需在帖子前再添加一个空格，代码就会出现。请看我的答案，然后尝试使用
组件willreceiveprops
生命周期方法，并查看它在浏览器控制台下记录的内容。你介意分享一下这个
表
组件是什么吗？编辑你的帖子，只需在帖子前面再添加一个空格，代码就会出现在我的答案中，然后尝试使用
组件将接收道具
生命周期方法，并查看它在你的浏览器控制台下记录了什么。您介意分享一下这个
表
组件是什么吗？