Reactjs 反应元件设计

我正在移植一个小脚本来做出反应。它是一个简单的国家/地区选择器插件，将国家/地区下拉列表和地区下拉列表联系在一起，因此后者总是显示所选国家/地区的相关地区。见：

问题是，我不太明白使用React实现组件化的最佳方法。我需要两个关键元素（country下拉列表和region下拉列表）完全独立，因此用户可以选择这两个下拉列表在DOM+周围标记中的确切位置。但我希望所有内部工作（即两个组件是如何连接在一起的）都隐藏在视图中。我在想也许是这样的

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

这里的任意标记

。。。但我不清楚这项计划的实际实施将如何运作。有什么想法/更好的建议吗？希望这个问题很清楚。

您可以使用在组件之间共享一些内容。基本上，CountryRegions组件将提供每个孩子都可以使用的上下文

---

CountryDropdown和RegionDropdown可以使用提供的上下文，只要它们是CountryRegions组件的子组件，不管嵌套有多深。

您是说希望您的国家选择器是两个React组件，它们可能都存在于HTML中（即两个

ReactDOM.render（）

calls），或者整个应用程序都是React，您希望组件存在于应用程序中的任何位置？我不确定是否完全遵循。。。基本上，我不希望用户必须将这两个下拉列表连接在一起。e、 g.保持“国家”下拉列表的选定状态+将该值传递给“地区”下拉列表。相反，我希望允许用户只包含单个组件，在他们想要的任何标记中包含两个下拉列表。这将使组件非常容易“插入”到React应用程序中。好吧，听起来组件存在于同一个React应用程序中，我只是不确定您是否希望React元素混合在单独的HTML容器中的传统HTML页面中。啊，明白了！是的，相同的应用程序-全部在React中。非常好，谢谢nvartolomei。是的，看起来很合算！