React开发中TableWrapper组件向函数类型children传递props的实现方法

你使用的是Render Props设计模式，TableWrapper的children是一个接收参数后返回JSX的函数，不是常规React组件，你之前将它当做组件用<Component />标签调用的写法不符合该模式的要求。

第一步：补全类型定义 #

先在TableWrapperInterface中明确children的类型：

import type { ReactNode } from 'react'

interface TableWrapperInterface {
  // 保留你原有其他属性的定义
  children: (params: TableWrapperComponentInterface) => ReactNode
  loadData: () => void
  data: any[]
  // 剩余的limit、loading等属性定义保持原有即可
}

第二步：修改TableWrapper渲染逻辑 #

不要将children当做组件渲染，直接执行这个函数，传入要透传的所有参数即可，修复后完整代码如下：

export const TableWrapper = (props: TableWrapperInterface) => {
  const {
    children,
    loadData,
    setIsExternalCreate,
    setIsExternalOpen,
    emptyStateAddButtonTitle,
    emptyStateButton = true,
    emptyStateText,
    showEmptyState,
    loading,
    data,
    limit = 10,
    isExternalOpen,
  } = props

  // 保留你原有逻辑：dispatchHandler、previousPage、nextPage、sendData等变量的定义
  // ...
  
  return (
    <div>
      {/* 直接执行children函数，传入所有要透传的参数 */}
      {children({
        dispatchHandler,
        setIsOpen: setIsExternalOpen,
        isOpen: isExternalOpen,
        data: sendData,
        loadData,
        previousPage,
        nextPage,
        // 有其他需要透传的参数直接在这里补充即可
      })}
    </div>
  )
}

export default TableWrapper

如果需要兼容children不是函数的常规场景，可以加一层类型判断：

return (
  <div>
    {typeof children === 'function' 
      ? children({ /* 你的透传参数 */ }) 
      : children
    }
  </div>
)

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