如何在React中制作可识别儿童的可组合组件？

Question

很抱歉，我不知道如何更好地表达问题。我正在尝试使用某些d3辅助函数制作地图，但这可能适用于其他情况。

我的地图需要标记，国家/地区路径/形状，标签等。设计组件的一种方法是这样的：

<Map countries={this.countries} markers={this.markers} labels={this.labels} ... />

在其render方法中，可能有一堆if块来确定最终绘制的内容。但是，这并不是很容易做到。我更喜欢这样的东西：

<Map>
  <Countries paths={this.countries}>
    <Metrics data={this.metrics> />
  </Countries>
  <Markers markers={this.markers} />
  // ...
</Map>

我认为这具有优势：

1. 我可以向地图添加新功能，而不必重写地图本身。
2. 根据地图的使用方式，添加和删除功能更加容易。也许一个实例不需要标记，但需要一个voronoi层。
3. 我可以有多个标记层或多个标签层：

<Map>
  <Markers ... color="red" />
  <Markers ... color="blue" />
</Map>

我已经看过并使用过其他类似的库。图表以相同的方式组装图表。甚至还有我最初使用的React-Simple-Maps，但没有我需要的功能。

Map将设置svg及其属性，投影，缩放和平移转换等。Markers将进行投影并转换并将其直接绘制为G元素。国家层也将如此。

但是，如果地图必须知道绘制了哪些国家/地区以设置初始缩放和中心，该怎么办？如果可以根据指标对国家进行着色怎么办？如果某些层不与其他层融合在一起怎么办？

几乎所有组件都需要知道它们拥有哪些子代才能正确执行操作，但是无论如何，我还是应该在地图内部拥有逻辑。

如果每个组件都必须从其父级接收道具，我该如何使道具类型起作用？我希望不必先与容器进行通信，然后再与孩子进行通信：

<Map onCreate={this.setProperties}>
  <Countries properties={this.mapProperties} />
</Map>

我的问题是，我该如何构建这些组件以便它们可以很好地组合？有没有做这些事情的模式或常用方法？