将 ref 转发到 react.FC 给出类型错误：类型'IntrinsicAttributes & Props & children :?反应节点

Posted 2023-04-14

【中文标题】将 ref 转发到 react.FC 给出类型错误：类型\'IntrinsicAttributes & Props & children :?反应节点

【英文标题】：forwarding ref to react.FC gives type error: Property ref does not exist on type 'IntrinsicAttributes & Props & children :? ReactNode将 ref 转发到 react.FC 给出类型错误：类型'IntrinsicAttributes & Props & children :?反应节点

【发布时间】：2021-01-03 16:41:17

【问题描述】：

我在这里学习如何使用前向引用我有一个 FC，我需要在其中初始化所有引用，然后将它们传递给它的子级，以便我可以获得一些 chartjs 图表的画布实例。但是使用 forwardRef 我得到一个类型错误，说 ref 不是孩子的属性。

const BUIDashboard: React.FC = () => 
    const chartRef = React.createRef<RefObject<HorizontalBar>>()
.
.
.
    return (

      <Child 
          ref=chartRef <------------------- TYPE ERROR HERE
          isLoading=isLoadingChild
          data=childData />
     )

孩子没有错误，但它是这样设置的

type Props = 
  rootProps?: DashboardCardProps
  isLoading?: boolean
  data?: BUIMetrics['breachBreakdownByOutcome']


const Child: React.FC<Props> = React.forwardRef(( rootProps, isLoading, data , ref: RefObject<HorizontalBar>) => 

    return (
      <HorizontalBar ref=ref/>
    )

我是否错误地为孩子定义了参数？

我认为问题可能出在这一行

const Child: React.FC<Props>

所以我将 Props 类型更新为

type Props = 
  rootProps?: DashboardCardProps
  isLoading?: boolean
  data?: BUIMetrics['breachBreakdownByOutcome']
 &  ref: RefObject<HorizontalBar> 

然后子组件声明抛出这个错误：

TS2322: Type 'ForwardRefExoticComponent<Pick<Props, "rootProps" | "isLoading" | "data"> & RefAttributes<HorizontalBar>>' is not assignable to type 'FC<Props>'.
  Types of property 'defaultProps' are incompatible.
    Type 'Partial<Pick<Props, "rootProps" | "isLoading" | "data"> & RefAttributes<HorizontalBar>> | undefined' is not assignable to type 'Partial<Props> | undefined'.
      Type 'Partial<Pick<Props, "rootProps" | "isLoading" | "data"> & RefAttributes<HorizontalBar>>' is not assignable to type 'Partial<Props>'.
        Types of property 'ref' are incompatible.
          Type '((instance: HorizontalBar | null) => void) | RefObject<HorizontalBar> | null | undefined' is not assignable to type 'RefObject<HorizontalBar> | undefined'.
            Type 'null' is not assignable to type 'RefObject<HorizontalBar> | undefined'.

这也是明目张胆的广告，但我正试图解决这个问题以解决下面链接的另一个问题。如果您对此问题有任何见解，也请告诉我。谢谢。 Using react-pdf with react-chartjs-2 to generate a pdf

【参考方案1】：

type Props = 
  rootProps?: DashboardCardProps
  isLoading?: boolean
  data?: BUIMetrics['breachBreakdownByOutcome']


const Child = React.forwardRef<RefObject<HorizontalBar>,Props>(( rootProps, isLoading, data, children , ref) => 
    return (
      <HorizontalBar ref=ref/>
    );
)