Reactガイドを読んでいくその41

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

ref のフォワーディング

高階コンポーネントにおける ref のフォワーディング

refのフォワーディングは高階コンポーネントにおいても便利。
HOCはコンポーネントに対してよく使う機能を追加したい時に使う。
Rectではよく使われている機能で、ReduxであればconnectがHOCになるそう。

postd.cc qiita.com

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);
}

今日はここまで。