問題タブ [use-ref]

現在の参照が何であるかを調べようとしています。この背後にある理由は、ユーザーが現在のセクションではないセクションに入ろうとするたびにポップアップをトリガーできるようにするためです。

セクションがあります：

私のナビ内には、このようなリンクがあります

そして最後に私はポップアップを持っています:

次に、jsx の戻り値内で、次のように各セクションを呼び出します。

setOpenPopupいつでも真になりたいsection pressed IS NOT current.section

そのため、現在のセクションを保存できる setRef 状態を作成し、それを各<a>ナビゲーション リンク内で呼び出すことを考えていました。

このようなもの：<li><a onClick={IF REF PRESSED IS NOT THE CURRENT REF SHOW POPUP} href="#section1">Section</a></li>

世界地図上の特定の国をクリックすることになっている地理ゲームを作成しています。正しい国をクリックすると、国の色が変わり、クリックする新しい国がゲームに表示されます。プレイヤーが分からない場合は、ボタンをクリックすると正しい答えが表示されます。このために、クリック イベントをシミュレートして、正しい国をクリックしたかのように同じ onClick() 関数が呼び出されるようにします。

私は D3 を使用しており、世界地図は svg パスで構成されています。以下は、HTMLElement.click() メソッドを使用して動作すると思われるコードです。

次に、いくつかのチュートリアルを見て、何らかの理由で完全には理解できませんが、これには React.useRef を使用する必要がありますが、すべての例で、返される要素に「ref」値を設定していますReact コンポーネントの最初から、次のようにします。

私のsvgパス要素が最初に返されないため、これは明らかに機能しません。だから私の質問は、useRefを使用するかどうかにかかわらず、どうすればこれを達成できますか?

以下は、私が見たいくつかの以前の質問で、これも役に立ちませんでした。 React要素でクリック イベントをシミュレートする React Test Renderer要素でクリックをシミュレートする React 要素でクリックをシミュレート する

親コンポーネント:

そして子供：

Childだけでなく、より多くの小道具を渡したい場合はどうすればよいrefですか?

ドキュメントとチュートリアルを検索しましたが、何も見つかりませんでした。試行錯誤により、これはうまくいくと思います：

で、Childこれらの小道具 ( onClick、prop1、prop2) を から取得できますprops。

それだけでいいですか？ref子供に渡す最後の小道具として置くことによって？

Childが必要なボタンが複数ある場合はどうすればよいrefですか?