forwardRef和ui-fabric组件出错

时间:2020-06-24 12:07:16

标签: reactjs typescript office-ui-fabric-react

当使用forwardRef和office-ui-fabric的DatePicker组件时出现错误。我正在尝试创建一个功能组件,并返回对Fabric组件的引用。 我的代码如下:

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; }'

您能帮我弄清楚吗?非常感谢

1 个答案:

答案 0 :(得分:0)

好吧,我想我已经找到了解决方案。我将其分享给有相同问题的人。

// GithubMetadataFactory allows to provide a custom generated metadata
type GithubMetadataFactory func(repo github.Repository) Metadata

// GithubProjectMatcher matches a repository with a project
type GithubProjectMatcher struct {
    Rules map[string]GithubProjectMatcherRule `json:"rules,omitempty"`
}

// GithubProjectMatcherRule rule that matches a repository to a project
type GithubProjectMatcherRule struct {
    URL *Regexp `json:"url,omitempty"`
}


// Regexp adds unmarshalling from json for regexp.Regexp
type Regexp struct {
    *regexp.Regexp
}

// UnmarshalText unmarshals json into a regexp.Regexp
func (r *Regexp) UnmarshalText(b []byte) error {
    regex, err := regexp.Compile(string(b))
    if err != nil {
        return err
    }

    r.Regexp = regex

    return nil
}

// MarshalText marshals regexp.Regexp as string
func (r *Regexp) MarshalText() ([]byte, error) {
    if r.Regexp != nil {
        return []byte(r.Regexp.String()), nil
    }

    return nil, nil
}