forwardRef 和 ui-fabric 組件出錯

Question

使用 forwardRef 和 office-ui-fabric 的 DatePicker 組件時出現錯誤。 我正在嘗試創建一個功能組件並返回對結構組件的引用。 我的代碼如下：

import React, { forwardRef } from "react";
import styled from "styled-components";
import { DatePicker, IDatePicker, IRefObject } from "office-ui-fabric-react";

interface IProps extends IDatePicker {
    label?: string;
    error?: string;
}

export const Date = forwardRef<IRefObject<IDatePicker>, IProps>(({ ...props }, ref) => {

    return <DateStyled>

        <DatePicker componentRef={ref} />

    </DateStyled>
});

const DateStyled = styled.div``;

我得到的錯誤在線

<DatePicker componentRef={ref} />

它說以下

Type '((instance: React.RefObject<IDatePicker> | RefObject<...> | ((ref: IDatePicker | null) => void) | null) => void) | MutableRefObject<...> | null' is not assignable to type 'React.RefObject<IDatePicker> | RefObject<...> | ((ref: IDatePicker | null) => void) | undefined'.
  Type 'null' is not assignable to type 'React.RefObject<IDatePicker> | RefObject<...> | ((ref: IDatePicker | null) => void) | undefined'.ts(2322)
DatePicker.types.d.ts(26, 5): The expected type comes from property 'componentRef' which is declared here on type 'IntrinsicAttributes & IDatePickerProps & { children?: ReactNode; }'

你能幫我弄清楚嗎。 非常感謝

Answer 1

好吧，我想我已經找到了解決方案。 我分享給有同樣問題的人。

import React, { forwardRef } from "react";
import styled from "styled-components";
import { DatePicker, IDatePicker, IDatePickerProps } from "office-ui-fabric-react";

interface IProps extends IDatePickerProps {
    label?: string;
    error?: string;
}


export const Date = forwardRef<IDatePicker, IProps>(({ ...props }, ref) => {


    return <DateStyled>

        <DatePicker  {...props} componentRef={ref || undefined} />

    </DateStyled>
});

const DateStyled = styled.div``;