每当将可选道具发送到子组件时显示错误

Question

我正在尝试具有行选择功能的可选功能，这应基于从父级传递的道具来确定。我在单个页面上有两个网格，其中一个具有支持行选择的属性，而另一个则不支持行选择。但我收到此错误“无法读取未定义的属性'className'”。

沙盒：https://codesandbox.io/s/react-table-row-table-alternate-single-row-working-5fr81

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

Answer 1

在onRowClick中的DataGrid.js函数中，您的函数在第一次渲染时（或直到单击某项之前）将不返回任何内容。 ReactTable在这里期待什么。如果提供一个空对象，它将成功渲染。