reactjs - 我如何在 react 表中指定扩展数据行？

Question

来自这个文档示例。

https://react-table.js.org/#/story/custom-expander-position

文档示例的结果:

1. when i click row0 data that expanded under row0 will show Hello
2. when i click row1 data that expanded under row1 will show Hello

关于 ReactTable 中的 Prop SubComponent。当展开一行时，每一行都会显示相同的数据，但我想显示特定于行的数据

我想做的结果:

1. when i click row0 data that expanded under row0 will show Hello 0
2. when i click row1 data that expanded under row1 will show Hello 1

我如何使用 react-table 做到这一点？

Answer 1

你可以为你的子组件试试这个:

SubComponent={(v) => <div style={{padding: '10px'}}>Hello {v.row._index}</div>}

沙箱:https://codesandbox.io/s/o708980o7q

v 是元素，您将获得要显示的行的索引。希望这会有所帮助。