Javascript 向子组件发送可选道具时显示错误

我试图选择行选择功能，这应该根据从父级传递的道具来确定。我在一个页面上有两个网格，其中一个有支持行选择的道具，而另一个没有。但我得到这个错误，无法读取未定义的属性'className'

沙箱：

---

在DataGrid.js中的onRowClick函数中，在第一次渲染或单击某个对象之前，函数不会返回任何内容。ReactTable在这里期待一些东西。如果您提供一个空对象，它将成功渲染。

您提供的所有代码对于查找错误毫无意义，Codesandbox提供了导致错误的行的所有必需信息，因此只需遵循它即可。。。显然，在const trProps=uu.splitPropsgetTrPropsfinalState行中，未定义，未定义，这个gettprops返回未定义，所以只需调试它来了解原因

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

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

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

  getData = () => {
    const data = [
      { firstName: "Jack", status: "Submitted", items: [1, 2, 3, 4] },
      { firstName: "Simon", status: "Pending", items: [1, 2] },
      { firstName: "Syls", status: "Pending", items: [1] },
      { firstName: "Pete", status: "Approved", items: [] }
    ];
    this.setState({ data });
  };

  getColumns = () => {
    const columns = [
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Status",
        accessor: "status"
      },
      {
        Header: "Items",
        accessor: "items",
        Cell: row => <ShowMore value={row.value} />
      }
    ];
    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}
        />
        <DataGrid data={this.state.data} columns={this.state.columns} />
      </>
    );
  }
}