Question

我正在创建一个抽象网格，我的主要组件是a，并且该表有3个组件（就像普通表），并且我可以选择是否要使用默认的TableBody，TableHeader或TableFooter或者通过我自己的例如

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

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

let templates = {
  header: null,
  body: <TableBody2 data={this.state.data}/>,
  footer: null

以下是我将组件传递到表格的方式：

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

我并没有完全理解我是如何访问内部的数据道具

解决：在我的表组件中，我调用我的组件（TableBody2）（this.props.templates.body（this.props））并将其传递给Table的道具，这样我就可以访问这样的数据了

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

  )
}

Answer 1

看起来Render-Props模式是你的朋友。渲染道具模式的关键在于：您将function作为属性传递给组件，然后您可以在render()

中使用该功能

来自官方文件：

渲染道具是一个组件用来知道渲染内容的函数道具。

然后，您可以增强Table组件，以便对渲染的内容提供更细粒度的控制。对于e.x.您可以定义Table组件以接受3个renderProps，让我们称之为header，body，footer

Table的渲染方法可能如下所示：

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} />)} />

你可以看一下Downshift library code，它使用渲染道具来提供灵活性。

Answer 2

我必须诚恳地问我这个问题不是很清楚，但是如果你问你如何访问组件（表）中的道具那么它是：this.props.templates

Answer 3

在接收组件中，您只需使用this.props.data或this.props.template来访问数据。或者，您可以尝试使用componentWillReceiveProps()，如下所示：

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

或constructor(props)以与上述相同的方式，如果它只是一次性操作。

使用传递的组件

3 个答案: