[译] 如何向带有插槽的 React 组件传递多个 Children

• 原文地址：Pass Multiple Children to a React Component with Slots
• 原文作者：Dave Ceddia
• 译文出自：掘金翻译计划
• 本文永久链接：github.com/xitu/gold-m…
• 译者：Zheng7426
• 校对者：noahziheng, BillShiyaoZhang

假如你需要写一个可以重复使用的组件。可是呢，名为 children 的 prop 不能解决这个需求。这个组件得有能力接收不止一个 children，而且这些 children 的放置还不是相邻的，而是按照需求而定。

可能你在写的是带有一个标题、一个边栏和一个内容区块的名为 Layout 的组件。又或者你正巧在写一个带有左右两侧动态边栏的 NavBar 组件。

以上这些任务都可以轻松地借助 “插槽” 模式完成，换言之就是传递 JSX 到一个 prop 中去。

小结：你可以把 JSX 传向任何而不只是叫 children 的prop，也并不局限于通过在一个组件的标签里嵌入 JSX —— 从而在简化数据传递的同时呢，也让组件有更多被重复使用的价值。

快速回顾 React 里的 Children

咱们得先共同了解这样一个事实：React 能够让你通过在 JSX 标签之间嵌套 children 的方式来向组件传递 children。这些元素 （零个、一个或多个）在那个组件里将以名为 children 的 prop 的形式存在。 React 的名为 children 的 prop 其实相当于 Angular 的 transclusion 还有 Vue 的 <slot>。

这里有一个向 Button 组件传递 children 的例子：

<Button>
  <Icon name="dollars"/>
  <span>BUY NOW<