打字稿和本机反应的 ForwardRef 错误 [英] ForwardRef error with typescript and react-native

问题描述

我在使用 forwardRef 时遇到 ts 错误

//[ts] 类型typeof React"上不存在属性forwardRef".const MyComponent = React.forwardRef((props: Props, ref: any) => ...

在 React Native 中，父组件抛出此错误:

Invariant Violation: 元素类型无效:预期为字符串(对于内置组件)或类/函数(对于复合组件)但得到:对象

知道如何解决吗?

解决方案

根据定义:

function forwardRef(Component: RefForwardingComponent): ComponentType
;接口RefForwardingComponent{(props: P & { children?: ReactNode }, ref?: Ref<T>): ReactElement<any>|空值;propTypes?: ValidationMap<P>;contextTypes?: ValidationMap;defaultProps?: Partial<P>;显示名称?:字符串；}

ref 是一个可选参数，请尝试以下操作:

在一个类中创建一个类型参数等于你想要的目标的 ref 对象(在我的例子中是 div 但 View 也适用于 react-native)

私有divRef:React.RefObject
= React.createRef();

在表示转发组件的 props 的接口中，将其作为可选属性公开

接口道具{ref?: React.RefObject
;}

声明类型为 React.ComponentType

的转发组件

const ComponentWithForwardedRef: React.ComponentType=React.forwardRef((props: Props, ref?: React.Ref
) => (<div ref={ref}>{props.message}</div>));

当创建了具有转发引用的组件实例时，将创建的引用对象作为道具发送

多合一:

import * as React from "react";从react-dom"导入{渲染}；界面道具{消息:字符串；ref?: React.RefObject
;}const ComponentWithForwardedRef: React.ComponentType=React.forwardRef((props: Props, ref?: React.Ref
) => (<div ref={ref}>{props.message}</div>));类 App 扩展了 React.Component{私有 divRef: React.RefObject
= React.createRef();公共 componentDidMount() {const div = this.divRef.current;//检查控制台！控制台日志(div)；}公共渲染(){返回 (<ComponentWithForwardedRef ref={this.divRef} {...this.props}/>)}}render(<App message="hello world"/>, document.getElementById("root"));

后代链接:https://codesandbox.io/s/6v152q394k

依赖项(参考目的)

"@types/react": "^16.3.11","@types/react-native": "^0.55.19",反应原生":0.55.2"，打字稿":^2.8.1"

I'm getting a ts error when using forwardRef

// [ts] Property 'forwardRef' does not exist on type 'typeof React'.
const MyComponent = React.forwardRef((props: Props, ref: any) => ...

In React Native the parent component is throwing this error:

Invariant Violation: Element type is invalid: expected a string (for build-in components) or a class/function (for composite components) but got: object

Any idea on how to solve it?

解决方案

According to the definitions:

function forwardRef<T, P = {}>(Component: RefForwardingComponent<T, P>): ComponentType<P & ClassAttributes<T>>;
interface RefForwardingComponent<T, P = {}> {
    (props: P & { children?: ReactNode }, ref?: Ref<T>): ReactElement<any> | null;
    propTypes?: ValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
}

ref is an optional argument, try the following:

Inside a class create a ref object with a type parameter equal to your desired target (in my case div but View also works in react-native)

private divRef: React.RefObject<div> = React.createRef();

In the interface that represents the props for the forwarded component expose it as an optional property

interface Props {
  ref?: React.RefObject<div>;
}

Declare the forwarded component with the type React.ComponentType

const ComponentWithForwardedRef: React.ComponentType<Props> = 
  React.forwardRef((props: Props, ref?: React.Ref<div>) => (
    <div ref={ref}>{props.message}</div>
  ));

When an instance of the component with the forwarded ref is created send the created ref object as a prop

<ComponentWithForwardedRef ref={this.divRef} />

All in one:

import * as React from "react";
import { render } from "react-dom";

interface Props {
  message: string;
  ref?: React.RefObject<div>;
}

const ComponentWithForwardedRef: React.ComponentType<Props> = 
  React.forwardRef((props: Props, ref?: React.Ref<div>) => (
    <div ref={ref}>{props.message}</div>
  ));

class App extends React.Component<Props> {
  private divRef: React.RefObject<div> = React.createRef();

  public componentDidMount() {
    const div = this.divRef.current;
    // check the console!
    console.log(div);
  }

  public render() {
    return (
      <ComponentWithForwardedRef ref={this.divRef} {...this.props} />
    )
  }
}

render(<App message="hello world" />, document.getElementById("root"));

Link for posterity: https://codesandbox.io/s/6v152q394k

Dependencies (reference purposes)

"@types/react": "^16.3.11",
"@types/react-native": "^0.55.19",
"react-native": "0.55.2",
"typescript": "^2.8.1"

这篇关于打字稿和本机反应的 ForwardRef 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！