React.FC 中外部调用 ProColumns 查询方法详解 - 使用 useProTable 和 useRequest

"React.FC 中外部调用 ProColumns 查询方法详解 - 使用 useProTable 和 useRequest"\n\n本文介绍了在 React.FC 中外部调用 ProColumns 查询的两种方法：使用 useProTable 和 useRequest。详细解释了每种方法的步骤和示例代码，并提供了选择合适方法的建议。\n\n使用 useProTable 时，可以将 ProColumns 作为参数传递给 useProTable，然后在返回的 tableProps 中获取查询相关的方法。\n\ntsx\nimport { useProTable } from \"@ant-design/pro-table\"\n\nconst MyComponent = () => {\n const columns = [\n // ... ProColumns\n ]\n\n const { tableProps, search } = useProTable({\n columns,\n request: async () => {\n // ... 请求数据\n },\n })\n\n const handleSearch = () => {\n search()\n }\n\n return (\n <div>\n <button onClick={handleSearch}>查询</button>\n <Table {...tableProps} />\n </div>\n )\n}\n\n\n使用 useRequest 时，可以将 ProColumns 作为参数传递给 useRequest，然后在返回的 run 方法中执行查询。\n\ntsx\nimport { useRequest } from \"umi\"\n\nconst MyComponent = () => {\n const columns = [\n // ... ProColumns\n ]\n\n const { run } = useRequest(\n async () => {\n // ... 请求数据\n },\n {\n manual: true,\n },\n )\n\n const handleSearch = () => {\n run()\n }\n\n return (\n <div>\n <button onClick={handleSearch}>查询</button>\n {/* ... */}\n </div>\n )\n}\n\n\n以上是两种常见的外部调用 ProColumns 查询的方法，可以根据具体需求选择适合的方式。