この記事を読む前に、前回の記事 を読むことをお勧めします!
refのフォワーディングとは、親コンポーネントから子コンポーネントにrefを渡すテクニックで、これにより子コンポーネントのDOM操作などを行うことができます。
それでは、具体的な方法を見ていきましょう!
refフォワーディング
順を追ってrefフォワーディングの実装順について説明します。
- まず、
React.createRef
でRefオブジェクトを作り、それを子コンポーネントに<Button ref={ref}>
のようにref属性に指定します。 - 子コンポーネントで
React.forwardRef()
を用いて受け取ります。forwardRef
は引数にprops
、ref
の順で受け取ります。 - 受け取ったrefを操作したいDOMノードのref属性に指定します。
この手順を通すと、ref.current
は操作したい子コンポーネントのDOMノードを指すようになります。
例を以下に示します。
const ForwardingButton = React.forwardRef((props, ref) => (
<button ref={ref}>
{props.children}
</button>
));
const ref = React.createRef();
<ForwardingButton ref={ref}>Click me!</ForwardingButton>;
補足
refフォワーディングを使わずに、つまりReact.forwardRef
を用いない方法で親から子のコンポーネントにrefを渡そうとするとエラーが出ます!
基本的に子コンポーネントのDOM操作などを行いたい場合はrefフォワーディングを使いましょう。
また、refのフォワーディング先はDOMノードだけではなく、クラスコンポーネントのインスタンスに対してもフォワーディングすることができます。
高階コンポーネントでのrefフォワーディング
HOCでforwardRef を使う例を以下に示します。
function logProps(Component) {
class LogProps extends React.Component {
componentDidUpdate(prevProps) {
console.log('old props:', prevProps);
console.log('new props:', this.props);
}
render() {
const { forwardedRef, ...rest } = this.props;
return <Component ref={forwardedRef} {...rest} />;
}
}
return React.forwardRef((props, ref) => {
return <LogProps {...props} forwardedRef={ref} />;
});
}