【React】forwardRefを使用しているコンポーネント内でrefの使用

実現したいこと

  • 親コンポーネントから子コンポーネントのDOM操作が出来る。 ←forwardRef使用で可能
  • 親コンポーネントのref指定有無に関わらずInputComponent内でDOM操作したい。 ←実装方法が分からず困っている部分

ts

const InputComponent = forwardRef<HTMLInputElement, Props>((props, ref) => { //このコンポーネント内でref操作する処理を書きたい /* useEffect(()=> { ref.current.focus(); }) */ return <input ref={ref} />}) const App = () => { const ref = React.createRef(); return <InputComponent ref={ref} />;}

上記2点の要件を満たすことは可能でしょうか?
解決策など教えて頂ければ幸いです。

補足情報(FW/ツールのバージョンなど)

React18

コメントを投稿

0 コメント