[解決済み] クラスベースのコンポーネントでReact.forwardRefを使用するには？

質問

React.forwardRefを使おうとしていますが、クラスベースのコンポーネント（HOCではない）で動作させる方法につまづいています。

docsの例では、要素と関数型コンポーネントを使用し、高次コンポーネントのためにクラスを関数でラップしています。

のようなものから始めると この の中に ref.js ファイルに記述します。

const TextInput = React.forwardRef(
    (props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />)
);

というように定義し、代わりにこのような

class TextInput extends React.Component {
  render() {
    let { props, ref } = React.forwardRef((props, ref) => ({ props, ref }));
    return <input type="text" placeholder="Hello World" ref={ref} />;
  }
}

または

class TextInput extends React.Component {
  render() { 
    return (
      React.forwardRef((props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />))
    );
  }
}

のみ動作しています:/。

また、私は知っている、refはreactの方法ではないことを知っています。サードパーティのキャンバスライブラリを使おうとしていて、そのツールのいくつかを別のコンポーネントで追加したいので、イベントリスナーが必要で、ライフサイクルメソッドが必要なんです。後で違うルートになるかもしれませんが、これを試してみたいのです。

ドキュメントによると可能なんですね!

Refの転送はDOMコンポーネントに限定されるものではありません。クラスコンポーネントのインスタンスへの参照も転送することができます。

から のメモをこのセクションの

しかし、その後、単なるクラスではなく、HOCを使うようになるのです。

どのように解決するのか？

には常に同じプロップを使うという考え方があります。 ref はヘルパーでクラスエクスポートをプロキシすることで実現できます。

class ElemComponent extends Component {
  render() {
    return (
      <div ref={this.props.innerRef}>
        Div has a ref
      </div>
    )
  }
}

export default React.forwardRef((props, ref) => <ElemComponent 
  innerRef={ref} {...props}
/>);

ということで、基本的にはpropからforwardのrefは別に持たざるを得ないのですが、ハブの下でも可能です。一般の人が普通にrefとして使うことが重要です。