警告 関数コンポーネントに参照番号を与えることはできません。この参照にアクセスしようとすると失敗します。

問題の発生源

子コンポーネントがあり、外部の親コンポーネントは参照を通じて子コンポーネントのDOMを取得します。現在、子コンポーネントに翻訳（国際化）を追加する必要があります。

export default ChildComponent;
// Change it to the following
export default withTranslation('translation')(ChildComponent);

翻訳を追加すると、エラーが報告されます

Warning: Function components cannot be given refs.
Attempts to access this ref will fail.
Did you mean to use React.forwardRef()?

問題の理由

親コンポーネントがrefで子コンポーネントのノードを取得し（子コンポーネントはクラスで作成）、withTranslationラッピングを使用して子コンポーネントを関数で作成したためです。関数で作成された子コンポーネントはrefを追加することができません。これを解決するためにReact.forwardRefを使用することが公式に推奨されています。

Baiduの結果、reduxでもこの問題が発生します。

export default connect(stateToProps, null, null, { forwardRef: true })(ChildNode);

解決方法

Reactの公式サイトが詳しいので、React.forwardRef()メソッドを試したのですが、うまくいきませんでした。i18nのサイトで推奨されているメソッドを見てみたところ( https://react.i18next.com/latest/withtranslation-hoc ) use ref (>= v10.6.0) のように、forwardRefを使うことができます。

const Wrapped = withTranslation('translation', { withRef: true })(MyComponent);

// then pass a ref in your render method like
const myRef = React.createRef();
<Wrapped ref={myRef} />;

// use myRef.current to access it

その後、出力をそのように変更したところ、プロジェクトは正常に動作しました。ここでの知識は、refは高次のコンポーネントで値を渡すということです。

export default withTranslation('translation', { withRef: true })(ChildComponent);

参考資料

https://stackoverflow.com/questions/56688154/react-hooks-function-components-cannot-be-given-refs-with-useref

https://blog.csdn.net/he452460213/article/details/103911923

https://react.i18next.com/

https://react.i18next.com/latest/withtranslation-hoc

https://zh-hans.reactjs.org/docs/forwarding-refs.html