javascript - 每当可选 Prop 发送到子组件时显示错误

Question

我正在尝试可选的行选择功能，这应该根据从父级传递的 Prop 来确定。我在单个页面上有两个网格，其中一个网格具有应该启用行选择的 Prop ，而另一个则没有。但我收到此错误“无法读取未定义的属性‘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

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