将动态内容传递给反应表子组件

Question

我将 react table v6 用于网格目的。 我正在尝试实现一个子组件，其中该子组件的数据需要动态传递。 此子组件应在单击箭头时展开和折叠。 我尝试了以下方法，但子组件未呈现任何数据。 我为此创建了一个包装器，应根据源数据动态传递子组件的数据。

https://codesandbox.io/s/react-table-row-table-subcompoentn-sk14i?file=/src/DataGrid.js

import * as React from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";

export default class DataGrid extends React.Component {
  renderSubComponent = original => {
    console.log(original);
    return (
      original.nested &&
      original.nested.map((i, key) => (
        <React.Fragment key={key}>
          <div>{i.name}</div>
          <div>{i.value}</div>
        </React.Fragment>
      ))
    );
  };
  render() {
    return (
      <ReactTable
        data={this.props.data}
        columns={this.props.columns}
        SubComponent={this.renderSubComponent}
      />
    );
  }
}

import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      columns: [],
      allData: []
    };
  }

  componentDidMount() {
    this.getData();
    this.getColumns();
  }

  getData = () => {
    const data = [
      {
        firstName: "Jack",
        status: "Submitted",
        nested: [
          {
            name: "test1",
            value: "NA"
          },
          {
            name: "test2",
            value: "NA"
          }
        ],
        age: "14"
      },
      {
        firstName: "Simon",
        status: "Pending",
        nested: [
          {
            name: "test3",
            value: "NA"
          },
          {
            name: "test4",
            value: "Go"
          }
        ],
        age: "15"
      }
    ];
    this.setState({ data });
  };

  getColumns = () => {
    const columns = [
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Status",
        accessor: "status"
      },
      {
        Header: "Age",
        accessor: "age"
      }
    ];
    this.setState({ columns });
  };

  onClickRow = rowInfo => {
    this.setState({ allData: rowInfo }, () => {
      console.log(this.state.allData);
    });
  };

  render() {
    return (
      <>
        <DataGrid
          data={this.state.data}
          columns={this.state.columns}
          rowClicked={this.onClickRow}
        />
      </>
    );
  }
}

render(<App />, document.getElementById("root"));

Answer 1

尝试传播论点，它将起作用：

   ...
   renderSubComponent = ({original}) => {
   ...