React组件设计

我将一个小脚本移植到React。这是一个简单的国家/地区选择器插件，将国家下拉菜单和区域下拉菜单联系在一起，所以后者总是显示所选国家的相关区域。参见：https://github.com/benkeen/country-region-selector React组件设计

事情是，我无法想象使用React进行组件化的最佳方法。我需要两个关键元素（国家下拉菜单和区域下拉菜单）完全独立，因此用户可以精确选择DOM +周围标记中出现两个下拉菜单的位置。但是我希望所有的内部工作（即两个组件如何连接在一起）隐藏起来。我在想也许是这样的...

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

......但我很朦胧的如何实际执行的工作。任何想法/更好的建议？希望这个问题很明确。

你是说你希望你的国家选择器是两个React组件，它们可能都存在于HTML中（即两个'ReactDOM.render（）'调用），或者整个应用程序是React，并且你希望组件存在于任何地方应用程序？ – Aaron

不确定我是否遵循...基本上我不希望用户必须将两个下拉线连接在一起。例如保持所选国家的下拉菜单+将该值传递给区域下拉菜单。相反，我想允许用户只包含那个组件，其中包含两个下拉列表中的任何标记。这会使组件非常容易“插入”到React应用程序中。 –

好吧，这听起来像组件存在于同一个React应用程序中，我只是不确定你是否想要在单独的HTML容器中混合使用传统HTML页面中的React元素。 – Aaron

您可以使用context在组件之间共享东西。基本上CountryRegions组件将提供每个孩子都可以使用的环境。

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

2016-05-17 19:23:58 nvartolomei

非常好，谢谢nvartolomei。是的，这看起来会符合法案！ –

回答