反応コンポーネントの設計

Question

小さなスクリプトをReactに移植しています。国のドロップダウンと地域のドロップダウンを結びつけるシンプルなcountry-region-selectorプラグインなので、後者は常に選択した国の関連地域を表示します。参照してください：https://github.com/benkeen/country-region-selector

私は非常にReactを使用してこれをコンポーネント化するための最良の方法を見積もることはできません。 2つの主要な要素（国のドロップダウンと地域のドロップダウン）が完全に独立している必要があるため、ユーザーは2つのドロップダウンがDOM +周囲のマークアップのどこに表示されるかを正確に選択できます。しかし、私はすべての内部の働き（すなわち、2つのコンポーネントがどのように結びついているか）を見えないようにしたい。私はおそらくこのようなものを考えていた...

<CountryRegions> 
    <span>arbitrary markup here</span> 
    <CountryDropdown /> 
    <p> 
     <RegionDropdown /> 
    </p> 
</CountryRegions> 

...しかし、私は実際の実装がうまくいくかどうかはわかりません。任意のアイデア/より良い提案？この質問がはっきりしていることを期待してください。

Answer 1

の間で何かcontextを使用して共有することができます。基本的にCountryRegionsコンポーネントは、すべての子が使用できるコンテキストを提供します。

CountryDropdownとRegionDropdown関係なく、深くネストされたか、限り、彼らはCountryRegionsコンポーネントの子ですとして提供されるコンテキストを使用することはできません。