javascript - 收到错误 - 如果对上面的列使用非字符串访问器，则需要列 ID - React

Question

我正在关注这个 React Table 示例 - https://codesandbox.io/s/n2gqAxl7

我有一个 React 表，其中有 13 列，对于少数列，我们有子列，而对于少数列，我们有单独的列。

假设此表中的第 1 至 10 列是独立的。而在第11列到第13列中，我们有了父列和子列的概念。

在前 10 列中，这些列将没有访问器，而第 6 到 10 列将在一行中包含上述列(1 到 5)的访问器，并在新行中包含它们自己的(6 到 10)访问器。

我主要修改了名为columns的常量

    const columns = [{
  id: 'col16',
  Header: () => {
    (
      <div>
        <div className="col1">
          Col 1
            </div>
        <div className="col6">
          Col 6
            </div>
      </div>
    );
  },
  accessor: (d) => { return (d.firstname + d.lastName); },
  width: 200
},
{
  id: 'col27',
  Header: () => {
    (
      <div>
        <div className="col2">
          Col 2
            </div>
        <div className="col7">
          Col 7
            </div>
      </div>
    );
  },
  accessor: (d) => { return (d.firstname + d.lastName); },
  width: 200
},
{
  id: 'col38',
  Header: () => {
    (
      <div>
        <div className="col3">
          Col 3
            </div>
        <div className="col8">
          Col 8
            </div>
      </div>
    );
  },
  accessor: (d) => { return (d.firstname + d.lastName); },
  width: 200
},
{
  id: 'col49',
  Header: () => {
    (
      <div>
        <div className="col4">
          Col 4
            </div>
        <div className="col9">
          Col 9
            </div>
      </div>
    );
  },
  accessor: (d) => { return (d.firstname + d.lastName); },
  width: 200
},
{
  id: 'col510',
  Header: () => {
    (
      <div>
        <div className="col5">
          Col 5
            </div>
        <div className="col10">
          Col 10
            </div>
      </div>
    );
  },
  accessor: (d) => { return (d.firstname + d.lastName); },
  width: 200
},
{
  id: 'col11',
  Header: 'Col 11',
  columns: [
    {
      Header: 'Sub Col 11a',
      accessor: (d) => { return (d.firstname); },
      width: 80,
    },
    {
      Header: 'Sub Col 11b',
      accessor: (d) => { return (d.firstname); },
      width: 80
    },
    {
      Header: 'Sub Col 11c',
      accessor: (d) => { return (d.firstname); },
      width: 80
    },
    {
      Header: 'Sub Col 11d',
      accessor: (d) => { return (d.firstname); },
      width: 80
    }
  ]
},
{
  id: 'col12',
  Header: 'Col 12',
  columns: [
    {
      Header: 'Sub Col 12',
      accessor: (d) => { return (d.firstname); },
      width: 80
    }
  ]
},
{
  id: 'col13',
  Header: 'Col 13',
  columns: [
    {
      Header: 'Sub Col 13a',
      accessor: (d) => { return (d.firstname); },
      width: 80
    },
    {
      Header: 'Sub Col 13b',
      accessor: (d) => { return (d.firstname); },
      width: 80
    },
    {
      Header: 'Sub Col 13c',
      accessor: (d) => { return (d.firstname); },
      width: 80
    },
    {
      Header: 'Sub Col 13d',
      accessor: (d) => { return (d.firstname); },
      width: 80
    }
  ]
}];

我还创建了一个 CodeSandbox。这是我的 CodeSandbox

https://codesandbox.io/s/lyn7r05p9

我收到错误 - 如果对上面的列使用非字符串访问器，则需要列 ID。

我需要其他 Stackoverflow 成员的帮助。我哪里做错了？

Answer 1

您需要在带有访问器的所有列中都有 id 字段。在您的代码中，您需要为每个内部列设置 id 字段，如下所示。

{
  id: 'col13',
  Header: 'Col 13',
  columns: [
    {
      Header: 'Sub Col 13a',
      id: 'sub_col_13a', // <-here
      accessor: (d) => { return (d.firstname); },
      width: 80
    },
    ...
  ]
}