Question

我将react-table与“父”表一起使用，该子表的子组件与另一个反应表相同。

在内部表的单元格编辑中，我需要使用父级的行号。

我正在尝试生成一个新的prop，它将传递父对象的row.index值，如下面的parentRow = {row.index}所示。但是我无法传递row.index值。

简而言之：如何通过父级的row.index来响应子组件中的表？

感谢您的帮助。

      <ReactTable
          data={this.props.data}
          columns = {this.WP2columns}
          pageSize={this.props.data.length+1}
          showPagination={false}
          className="-striped -highlight"
          SubComponent={row => {
            return (
              <div style={{ padding: "0 20px" }}>
                {console.log("WP2 SUBTABLE row=", row) }
                <ReactTable
                  data = {row.original.familywp_goal_tasklist}
                  columns={this.subcolumns}
                  parentRow = {row.index}
                  defaultPageSize={3}
                  showPagination={false}
                />
              </div>
            )
          }}
        />

Answer 1

在SubComponent中，使用 resolveData 属性传递父行索引。

      <ReactTable
          data={this.props.data}
          columns = {this.WP2columns}
          pageSize={this.props.data.length+1}
          showPagination={false}
          className="-striped -highlight"
          SubComponent={row => {
            return (
              <div style={{ padding: "0 20px" }}>
                <ReactTable
                  data = {row.original.familywp_goal_tasklist}
                  resolveData={data => data.map(d => {
                    return {
                      ...d,
                      parentRow: row.index
                    }
                  })}
                  columns={this.subcolumns}
                  defaultPageSize={3}
                  showPagination={false}
                />
              </div>
            )
          }}
        />

现在在单元格编辑参数中，您将具有 original.parentRow 属性。

如何从子组件中的另一个React表获取React表中“父”表的行号？

1 个答案: