javascript - 出现错误 - 如果对上面的列使用非字符串访问器,则需要列 id - React
问题描述
我正在关注这个 React Table 示例 - https://codesandbox.io/s/n2gqAxl7
我有一个 React Table,它将有 13 列,对于少数列,我们有子列,而对于少数列,我们有单独的列。
假设此表中的第 1 到第 10 列是独立的。在第 11 到 13 列中,我们有父列和子列的概念。
在前 10 列中,列将没有访问器,而第 6 到 10 列将在一行中具有上述列(1 到 5)的访问器,在新行中具有它们自己的(6 到 10)访问器。
我主要修改了称为列的常量
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 成员的帮助。我在哪里做错了?
解决方案
您需要在所有带有访问器的列中都有 id 字段。在您的代码中,您需要为每个内部列设置 id 字段。
{
id: 'col13',
Header: 'Col 13',
columns: [
{
Header: 'Sub Col 13a',
id: 'sub_col_13a', // <-here
accessor: (d) => { return (d.firstname); },
width: 80
},
...
]
}
推荐阅读
- docker - 如何在 Bitbucket Pipelines 中运行的 Docker 容器中使用 sbt 和 ivy2 缓存
- django - 如何将更改保存到 docker
- selenium - 如何在不使用 Headless 的情况下在 Jenkins 上运行我的自动化(测试)
- python - 如何控制根节点中惰性约束的数量?
- reporting-services - 如何始终显示每个月的第二个日期?
- java - 将一个 JKS 文件导入另一个会导致 java.security.UnrecoverableKeyException:无法恢复密钥
- string - SpringBoot @RequestParam MultipartFile 将在字符串连接中翻译@RequestParam String
- c# - 可以在没有构造函数中引用的情况下实例化已注册的注入类吗?
- java - Mapbox 动态创建标记
- mysql - 如何使用 Eloquent 选择每个值的最后一条记录?