React.forwardRef を使用しようとしていますが、クラスベースのコンポーネント (HOC ではない) で動作させる方法がわかりません。
ドキュメントの例では、要素と関数コンポーネントが使用され、高階コンポーネントの関数内にクラスがラップされることもあります。
それで、まずはこれファイル内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 のやり方ではないことはわかっています。サードパーティのキャンバス ライブラリを使用しようとしており、いくつかのツールを別のコンポーネントに追加したいので、イベント リスナーとライフサイクル メソッドが必要です。後で別の方法になるかもしれませんが、これを試してみたいと思います。
ドキュメントにはそれが可能であると書かれています!
参照転送は DOM コンポーネントに限定されません。クラス コンポーネント インスタンスにも参照を転送できます。
しかし、その後、クラスだけではなく HOC も使用し始めます。
ベストアンサー1
常に同じプロパティを使用するという考えは、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}
/>);
つまり、基本的には、フォワード参照に別のプロップを強制しますが、ハブの下で実行できます。一般の人々が通常の参照として使用することが重要です。