Open2023/03/31にコメント追加3ReactのforwardRefについて理解したいReactkapureka2023/03/31まずはドキュメントを読んでみよう。 https://react.dev/reference/react/forwardRef https://ja.reactjs.org/docs/forwarding-refs.html とりあえず、親にrefを渡すことができることが分かった。どんな場合に使ったら良いのか、メリットについて知りたい。 kapureka2023/03/31基本的には親から子のコンポーネントのDOMにアクセスしたい場合に使うみたい。 そもそも、refは使うべきでないとされている。ただ、サードパーティの生のJSで書いているライブラリとかにアクセスする際に必要だったりする。forwardRefを結局はコンポーネントを跨いで使用する時に使うというイメージで良さそう。 kapureka2023/03/31headless UI系でよく使われている。 Headless UI https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/utils/render.ts#L288-L298 Radix UI https://github.com/radix-ui/primitives/blob/main/packages/react/menu/src/Menu.tsx#L587-L592
kapureka2023/03/31まずはドキュメントを読んでみよう。 https://react.dev/reference/react/forwardRef https://ja.reactjs.org/docs/forwarding-refs.html とりあえず、親にrefを渡すことができることが分かった。どんな場合に使ったら良いのか、メリットについて知りたい。
kapureka2023/03/31基本的には親から子のコンポーネントのDOMにアクセスしたい場合に使うみたい。 そもそも、refは使うべきでないとされている。ただ、サードパーティの生のJSで書いているライブラリとかにアクセスする際に必要だったりする。forwardRefを結局はコンポーネントを跨いで使用する時に使うというイメージで良さそう。
kapureka2023/03/31headless UI系でよく使われている。 Headless UI https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/utils/render.ts#L288-L298 Radix UI https://github.com/radix-ui/primitives/blob/main/packages/react/menu/src/Menu.tsx#L587-L592