如何在ToolkitProvider外部触发react-bootstrap-table-2的exportCSV导出功能

该操作完全可以实现，你之前参考的this.refs.table.handleExportCSV()是react-bootstrap-table v1版本的API，你目前使用的带ToolkitProvider的v2版本已经重构了导出逻辑，方法不再挂载在BootstrapTable组件实例上，所以会出现找不到方法的问题，按照以下步骤调整即可：

• 第一步：在ToolkitProvider所在的外层组件中声明存储导出方法的载体，类组件可以挂载到实例属性上，函数组件推荐使用useRef存储

// 类组件示例
class TableWrapper extends React.Component {
  // 声明属性存储导出方法
  exportCSV = null;
  // 其他组件逻辑
}

// 函数组件示例
const TableWrapper = () => {
  // 声明ref存储导出方法
  const exportCSVRef = React.useRef(null);
  // 其他组件逻辑
}

• 第二步：在ToolkitProvider的render props回调中，把内置的导出方法存到刚才声明的载体中
  调整你原有的代码，新增一行存储逻辑即可：

<ToolkitProvider
    keyField="id"
    data={[...data]}
    columns={Columns}
    exportCSV={{ onlyExportFiltered: true, exportAll: false }}
    search
>
    {
        props => {
            // 类组件存储方式
            this.exportCSV = props.csvProps.exportCSV;
            // 函数组件存储方式，二选一即可
            // exportCSVRef.current = props.csvProps.exportCSV;
            return (
                <div>
                    <MyExportCSV {...props.csvProps} />
                    <hr />
                    <BootstrapTable 
                        keyField='id'
                        {...props.baseProps}
                        pagination={paginationFactory(options)} 
                        expandRow={expandRow}
                        ref={n => node = n} 
                    />
                </div>
            )
        }
    }
</ToolkitProvider>

• 第三步：外部组件直接调用存储的导出方法即可触发导出

// 类组件调用示例
<button onClick={() => this.exportCSV?.()}>外部触发CSV导出</button>

// 函数组件调用示例
<button onClick={() => exportCSVRef.current?.()}>外部触发CSV导出</button>

如果调用导出方法的组件和ToolkitProvider所在组件层级跨度较大，可以通过状态管理库、React Context等方案共享这个导出方法，即可实现任意位置触发导出。

内容的提问来源于stack exchange，提问作者JoelE