reactjs - React-Table 获取对父组件中行的引用
问题描述
我在组件中有一个反应表组件。表的数据取自 redux 存储。我有一个按钮可以将数据导出到父组件中的 excel 中,并且需要访问子反应表组件中当前过滤、排序或分组的行以进行导出。
const App = () => {
const columns = React.useMemo(
() => [
{
Header: 'ID',
accessor: 'id',
}, etc...
],[]);
const myData = useSelector((state) => state.myData.myData);
const data = React.useMemo(() => myData, [myData]);
const [rowsToExport, setRowsToExport] = useState([]);
<CSVLink filename='table.csv' data={tableInstance.current.rows}>
<button>Export</button>
</CSVLink>
return <Table columns={columns} data={data} ref={tableInstance} />
}
const Table = React.forwardRef(({columns, data}, ref) => {
const instance = useTable({columns, data});
React.useImperativeHandle(ref, () => instance);
})
我有一个对我的表实例的引用,但在页面加载时,由于对表实例的引用为空,CSVLink 失败。我正在使用反应 csv。如何在父组件中拥有我的 CSV 链接并使用我的表实例中的最新行填充它。
解决方案
推荐阅读
- r - 可变宽度的滚动 30 天几何平均值
- css - 响应式网格单个项目大小
- c# - Entity Framework Core:表“Users”中的列“Id”的类型不能用作索引中的键列
- python - 代码中的 Python Iris 数据集散点图错误
- r - 使用 R 根据另一列中第一次发生的事件创建开始时间和结束时间列
- php - 如何摆脱我的 http 响应标头中的 x-robots-tag
- reactjs - Redux 在页面重新加载时失去状态,在我的应用程序中我无法使用 localStorage
- python - 目前支持的 Python 版本有哪些?
- python - Telegram 允许的 callback_data 大小小于 file_id 大小
- android - 如何使android应用程序代理感知(以编程方式)?