我正在构建一个需要渲染一些子组件的组件 . 更具体地说，我有一个Map组件，我希望它显示一个Legend组件 .
const Map = props => (
<div id="map">
{ this.props.children }
</div>
);
// Usage:
const MapWithLegend = () => (
<div id="map-view">
<Map><Legend /></Map>
</div>
);
// Usage:
const MapWithoutLegend = () => (
<div id="map-view">
<Map />
</div>
);
但是，这也可以使用命名道具表达：
const Map = ({ legend } => (
<div id="map">{ legend }</div>
);
// Usage:
const MapWithLegend = () => (
<div id="map-view">
<Map legend={Legend} />
</div>
);
// Usage:
const MapWithoutLegend = () => (
<div id="map-view">
<Map />
</div>
);
我不确定在缩放和可重用性方面哪种方式最好 . 最终，我们将不仅仅是传说来放置 Map ，例如：缩放，缩放/导航控件等......
为此使用React.Children是否有意义，还是应该使用命名道具？
我的直觉是使用 this.props.children 释放了Map，无论是否需要渲染一个图例或任何其他子控件，它还会在Map组件中创建一个后门，即：将任意组件作为Map组件的子项传递 .
这是一个问题吗？在渲染之前检查父组件中的 this.props.children 是否常见？如果是这样，怎么样？
那么，造型呢？使用命名道具，我可以定位/设计"children"因为它们被命名并且我知道它们是什么 . 使用React.Children，它是一个需要检查的组件数组，以便它们可以定位，在这种情况下，使用 this.props.children 可以获得什么？
我已经看到使用这两种范例的第三方组件，但我很好奇一个人选择一个而不是另一个的情景 .
1 回答
我建议使用
children：JSX语法只需查看渲染函数即可轻松显示组件的功能 . 如果你传递
legend作为道具，你不知道<Map/>会做什么 .它使您能够从呈现 Map 及其子项的容器中将道具传递给子项 . 这再次使
<Legend/>更加明显发生了什么检查孩子听起来像你将实现一个大的switch-case语句来处理所有边缘情况 . 使用
children不会产生任何边缘情况 .