我正在构建一个需要渲染一些子组件的组件.更具体地说,我有一个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>
);
我不确定在缩放和可重用性方面哪种方式最好.最终,我们将不仅仅是传说来放置地图,例如：缩放,缩放/导航控件等……
为此使用React.Children是否有意义,还是应该使用命名道具？
我的直觉是使用this.props.children可以解释Map是否需要渲染一个图例或任何其他子控件,但它还会在Map组件中创建一个后门,即：将任意组件作为子元素传递Map组件.
这是一个问题吗？在渲染它们之前检查父组件中的this.props.children是否常见？如果是这样,怎么样？
那么,造型呢？通过命名道具,我可以定位/设计“儿童”,因为它们被命名,我知道它们是什么.使用React.Children,它是一个需要检查的组件数组,以便它们可以定位,在这种情况下,使用this.props.children可以获得什么？
我已经看到使用这两种范例的第三方组件,但我很好奇一个人选择一个而不是另一个的情景.
