使用 React.forwardRef 时在 React/TypeScript 中提供什么类型的 ref？

Question

我只是无法正确输入。 如果我设置ref: any如下所示并且ref.current.focus()有效，我将转发一个正常工作的 ref。

function EditorFeat(): JSX.Element {
  const ref = useRef<HTMLElement | null>(null);

   // ...
   return (
    ......
    <Editor state={state} dispatch={dispatch} ref={ref} />
     ....
)
}

export default EditorFeat;

interface IEditor {
  state: AppState;
  dispatch: React.Dispatch<Action>;
}

// change ref:any to correct typings!
function Editor({ state, dispatch }: IEditor, ref: any): JSX.Element {
// ...
  return <DraftJsEditor ref={ref} /> // import from 'draft-js'
}

export default React.forwardRef(Editor);

但是一旦我尝试正确输入ref类型，我就会不断收到错误！

如果我做function Editor({state, dispatch}: IEditor, ref: HTMLElement): JSX.Element

我得到下一个错误：

  Overload 1 of 2, '(props: Readonly<DraftEditorProps>): DraftEditor', gave the following error.
    Type 'HTMLElement' is not assignable to type 'string | ((instance: DraftEditor | null) => void) | RefObject<DraftEditor> | null | undefined'.
      Type 'HTMLElement' is not assignable to type 'string'.
  Overload 2 of 2, '(props: DraftEditorProps, context?: any): DraftEditor', gave the following error.
    Type 'HTMLElement' is not assignable to type 'string | ((instance: DraftEditor | null) => void) | RefObject<DraftEditor> | null | undefined'.
      Type 'HTMLElement' is not assignable to type 'string'

如果我尝试React.RefObject<DraftEditor>我得到：

Argument of type '({ state, dispatch }: IEditor, ref: RefObject<DraftEditor>) => Element' is not assignable to parameter of type 'ForwardRefRenderFunction<DraftEditor, IEditor>'.
  Types of parameters 'ref' and 'ref' are incompatible.
    Type '((instance: DraftEditor | null) => void) | MutableRefObject<DraftEditor | null> | null' is not assignable to type 'RefObject<DraftEditor>'.
      Type 'null' is not assignable to type 'RefObject<DraftEditor>'

Answer 1

使用功能组件，这就像一个魅力，即使有点不寻常：

function RichEditor(props: RichEditorProps) {
  const [editor, setEditor] = React.useState<Editor | null>(null);

  React.useEffect(() => {
    editor?.focus() // or anywhere you want to use it
  }, [editor])
    

  return (
    <Editor
      ref={editor => setEditor(editor)}
    />
  )
}

Answer 2

如果您直接在组件顶部而不是在return语句的行中编写React.forwardRef ，则只需键入React.forwardRef ：

interface IEditor {
  state: AppState;
  dispatch: React.Dispatch<Action>;
}

const Editor = React.forwardRef<HTMLInputElement, IEditor>({ state, dispatch }, ref) {
  // ...
  return <DraftJsEditor ref={ref} /> // import from 'draft-js'
}

export default Editor;

说明：您使用两个泛型类型参数T和P键入React.forwardRef ：

React.forwardRef<T, P>(Editor)

• T是您最终通过DraftJsEditor引用的 HTML 元素的类型，因此这可能是HTMLDivElement或HTMLInputElement或任何其他元素。 TypeScript 错误消息通常会在第一次选择错误消息时引导您找到正确的消息。
• P是Editor组件的 props。

因此，在您的情况下，它可能是React.forwardRef<HTMLInputElement, IEditor>(Editor)正如您在上面的大解决方案中看到的那样。