reactjs - React 19 "ref som prop" och TypeScript

React 19 introducerar ett nytt alternativ till den befintliga forwardRef som kallas ref som prop:

https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop

Men tyvärr är exemplet som ges i blogginlägget skrivet i JavaScript, inte TypeScript:

function MyInput({ placeholder, ref }) {
  return <input placeholder={placeholder} ref={ref} />
}

//...
<MyInput ref={ref} />

Så i TypeScript, vad är den korrekta typen för ref-egenskapen?

Svar #1

Det verkar som React.RefObject INTE är korrekt. Jag har inga fel med React.Ref:

import type {Ref} from 'react'

function MyInput({placeholder, ref}: {placeholder?: string; ref?: Ref<HTMLInputElement>}) {
  return <input placeholder={placeholder} ref={ref} />
}

function MyComponent() {
  const ref = useRef<HTMLInputElement>(null)
  return <MyInput ref={ref} /> // OK
}

Glöm inte att markera det som valfritt (ref?: Ref<...>).

I mer komplexa situationer — som i mitt verkliga fall där jag använde @lexical/[email , som verkar inte helt kompatibel med React 19 — skrev jag ref så här:

function RichTextEditor({ref}: {ref?: Ref<LexicalEditor>}) {
  // ...
  return (
    // ...
      <EditorRefPlugin
        editorRef={(editorRef) => {
          if (!ref) return
          if (typeof ref === 'function') ref(editorRef)
          else ref.current = editorRef
        }}
      />
    // ...
  )
}

Svar #2

Använd React.RefObject:

function MyInput({placeholder, ref}: {
  placeholder: string;
  ref: React.RefObject<HTMLInputElement>;
}) {
  return <input placeholder={placeholder} ref={ref} />
}

Relaterade artiklar