Reactガイドを読んでいくその41
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
ref のフォワーディング
高階コンポーネントにおける ref のフォワーディング
refのフォワーディングは高階コンポーネントにおいても便利。
HOCはコンポーネントに対してよく使う機能を追加したい時に使う。
Rectではよく使われている機能で、ReduxであればconnectがHOCになるそう。
DevTools でのカスタム名表示
React.forwardRefではrender関数を受け取る。
// ここではForwardRefとしてDevToolsに表示される const WrappedComponent = React.forwardRef((props, ref) => { return <LogProps {...props} forwardedRef={ref} />; });
render関数に名前を付けるとDevToolsはその名前を含めるようになる。
また、render関数のdisuplayNameを設定することもできる。
function logProps(Component) { class LogProps extends React.Component { // ... } function forwardRef(props, ref) { return <LogProps {...props} forwardedRef={ref} />; } // Give this component a more helpful display name in DevTools. // e.g. "ForwardRef(logProps(MyComponent))" const name = Component.displayName || Component.name; forwardRef.displayName = `logProps(${name})`; return React.forwardRef(forwardRef); }
今日はここまで。