reactjs - 类型 'ref' 上不存在属性 'IntrinsicAttributes'

Question

我正在做一个 React typescript 项目。代码有效，但 ts 编译器一直提示我的引用。这是代码:

首先我有一个高阶组件来处理错误:

export class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
    constructor(props: ErrorBoundaryProps) {
        super(props);
    }

    static getDerivedStateFromError(error: any) {
       // some error handling related code
    }

    public componentDidCatch(error: any) {
        // some error handling related code
    }

    public render() {
       return this.props.children;
    }
}

还有一个高阶组件:

export function withErrorBoundary<T = {}>(Component: React.ComponentType<T>): React.ComponentType<T> {
    function Wrapped(props: T) {
        return (
            <ErrorBoundary>
                <Component {...props} />
            </ErrorBoundary>
        );
    }
    return Wrapped;
}

它像这样工作得很好:const NewComponent = withErrorBoundary(MyComponent)

但现在我正在构建一个需要 React.forwardRef 的新组件:

interface ILabelProps {
  value: string;
  mark: boolean;
  // other props with basic types
}
export const Label = React.forwardRef(
    (props: ILabelProps, ref) => {
    React.useImperativeHandle(ref, () => ({
        // some custom logic
    }), []);

    return (
        <>{...my UI}</>
    );
});

export MyLabel = withErrorBoundary(Label);

但是，当我这样使用它时，它会出错:

类型“IntrinsicAttributes & ILabelProps”上不存在属性“ref”

const App = () => {
   const labelRef = React.useRef();
   return <MyLabel {...props} ref={labelRef} />
}

但是，如果我只是使用 Label 而没有 errorBoundary HOC，它就会停止提示:

const App = () => {
   const labelRef = React.useRef();
   return <Label {...props} ref={labelRef} />
}

我认为问题可能与 React.forwardRef 的使用有关，因为这是我第一次使用它，而且我以前从未遇到过此类问题。有人知道如何解决这个问题吗？

谢谢!

Answer 1

复制您的代码时我没有看到任何错误。

但它在运行时确实有 1 个错误:

Warning: Function components cannot be given refs. 
Attempts to access this ref will fail. 
Did you mean to use React.forwardRef()?

基本上，您的组件 MyLabel = withErrorBoundary(Label) 是从 withErrorBoundaray 返回的新组件，因此它丢失了由 提供的 forwardRef >标签。要解决这个问题，您只需将 labelRef 传递给 Label 组件，如下所示:

  const MyLabel2 = withErrorBoundary(() => <Label {...props} ref={labelRef} />);

Codesandbox here.