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可以解释Map是否需要渲染一个图例或任何其他子控件，但它也会在Map组件中创建一个后门，即：传递任意组件作为Map组件的子组件。

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

另外，造型怎么样？通过命名的道具，我可以定位/设计＆＃34;孩子＆＃34;因为他们被命名，我知道他们是什么。使用React.Children，它是一个需要检查的组件数组，以便它们可以定位，在这种情况下，使用this.props.children可以获得什么？

我已经看过使用这两种范例的第三方组件，但我很好奇在哪种方案中选择一种方案而不是另一种方案。

Answer 1

我建议您使用children：

通过查看渲染功能，JSX语法可以轻松地向您显示组件的功能。如果您将legend作为道具传递，则您不知道<Map/>会对此做些什么。
它使您能够从呈现地图及其子项的容器中将道具传递给子项。这再次使<Legend/>

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

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

1 个答案: