转发 ref 到 react.FC 给出类型错误：属性 ref 不存在于类型

Question

我在这里学习如何使用前向引用我有一个 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} />     )}child没有错误但是是这样设置的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>所以我将道具类型更新为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'.这也是明目张胆的广告，但我正试图解决这个问题以解决下面链接的另一个问题。如果您对这个问题有任何见解，也请告诉我。谢谢。 

Answer 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}/>

    );

})