問題タブ [create-ref]

React.createRef() を使用して dom の 1 つの要素にアクセスする方法を知っています。しかし、createRef を使用して 2 つの異なる要素にアクセスしたいと考えています。複数の要素に動的にアクセスするためのスタックオーバーフローの例を見てきましたが、理解できません。ボタンのスパンタグ onClick の背景色を変更したい単純なコードをここに添付しています。これに続いて、ドキュメントを反応させました。私がここで間違っていることを教えてください。

上記のコードで、ユーザーが btn をクリックすると、それぞれのスパンの色が変更されます。

どんな助けでも大歓迎です。

詳細については、jsfiddle をご覧ください

コードレビューを行っていたところ、次のような別の開発者によって書かれたコードを見つけました。

次に、divRef を DOM 要素への参照として使用します。

ただし、私が知っているパターンはcreateRef、クラスコンポーネントで使用しuseRef、機能コンポーネントでフックを使用しています。ReactJS の公式https://reactjs.org/docs/refs-and-the-dom.htmlでさえ、将来の React バージョンのインライン ref を避けるように言っています。書くのはレガシーパターンですか？

私が調査できる限り、インラインrefは関数を 2 回レンダリングするため、避けることをお勧めします。

これについて利用可能な他の説明は何ですか？

react forwardRef を使用して、一連の子コンポーネント内の関数を呼び出そうとしています。これがコードです。

問題は、 createRef がループ外のコンポーネントに対してのみ機能するように見えることです。ここで何が問題なのか分かりますか。または、それを行うことはできませんか？