React:使用this.props.children或将组件作为命名道具传递

Question

我正在构建一个需要渲染一些子组件的组件.更具体地说,我有一个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的FreeS从关心它是否需要呈现一个传说,或任何其他子控件的地图,但是也带来了一个后门进入地图组成,即:通过任意组件作为Map组件的子项.

这是一个问题吗？this.props.children在渲染之前检查父组件是否常见？如果是这样,怎么样？

另外,造型呢？通过命名道具,我可以定位/设计"儿童",因为它们被命名,我知道它们是什么.使用React.Children,它是一个需要检查的组件数组,以便它们可以定位,在这种情况下,我从使用中获得了this.props.children什么？

我已经看到使用这两种范例的第三方组件,但我很好奇一个人选择一个而不是另一个的情景.

Answer 1

我建议children为此使用：

1. JSX 语法可以轻松地向您展示组件的功能，只需查看渲染函数即可。如果你legend作为道具通过，你不知道<Map/>会用它做什么。
2. 它使您能够将渲染 Map 及其子项的容器中的 props 传递给子项。这再次使得发生的事情变得更加明显<Legend/>

检查孩子听起来就像你将实现一个大的 switch-case 语句来处理所有边缘情况。使用children不会产生任何边缘情况。