为什么要使用 this.props.children？

Question

还有其他类似的问题已经“回答”，但答案并不完整，也没有解决真正的问题。

这真是一个two-parter加上一个sub-question。

    1. What are the general situations you would want to use this.props.children?

    2. What are some specific situations with examples?

已阅读文档，请不要只引用文档

这个问题的动机：

我提出这个问题的原因是，在提出这个问题时，文档给出了一个非常非常通用的示例，说明如何使用它以及执行此操作时使用的方法，但该示例没有给我们真实的上下文。它不是可用的 IRL。这个例子可以在整个应用程序中重复使用，没有韵律，没有理由，也没有理智。真的可以吗？

有人告诉我您将使用 this.props.children，“当您不知道 children 将被传递时。”但从技术上讲，您永远不会真正知道需要更多或不同的线路可能会发生哪些变化 children。所以这很模棱两可。

我还发现了 Jake Trent 的一篇有趣的文章：http://jaketrent.com/post/send-props-to-children-react/

这篇文章展示了如何根据组件的类型 add/remove 将 props 传递给这些“未知 children”，这很简洁（在构建第三方组件）。

到目前为止，我的最大收获是当您指定 this.props.children 时，您将 children 的权力授予 parent这是一个很好的理由还是只是一个副产品？（例如：proptypes，实际类型检查......）但是，

   2a. What other things would/could/should you do here?
   2b. What things should you not do?

请举例！

Answer 1

我喜欢将使用 props.children 的组件视为通用包装器，就像大多数其他 HTML 元素一样。

想想 fieldset 元素。

<form action="/post">
   <input type="text" name="myValue" placeholder="Some Data" />
   <input type="submit" value="Submit!" />
</form>

我们制作的表格真漂亮！但我希望它看起来……不同。我希望它在视觉上看起来更像一个表单。就像我想在它周围加一些边框，也许在顶部有一个小标签来描述它...啊我会把它包装在一个字段集中！

<fieldset>
   <legend>A Pretty Form</legend>
   <form action="/post">
      <input type="text" name="myValue" placeholder="Some Data" />
      <input type="submit" value="Submit!" />
   </form>
</fieldset>

现在看起来就是我想要的样子！也撒了一点legend，使这个例子...传奇。

重点是，fieldset 提供了一个具有某些属性的可重用组件，可用于对 HTML 内容进行分组。 child 元素与其功能完全无关。

我们可以在 React 中使用相同的原理吗？是的。而且它可以更强大！

假设我们想要一个特殊的 ReactFieldset 组件，它基于 HTML fieldset，它有自己的功能。我不会把所有的代码都写出来，因为谁有时间？但是想象一下，您制作了一个 ReactFieldset 组件，它具有许多自己的功能：它可以折叠，可以移动，可以做各种各样的事情！而且它还可以容纳任何类型的内容。

好吧，那么您需要在它的 render 函数中做的就是：

render() {
    return <fieldset { ...superFunctionalityControllingProps }>
    { this.props.children }
    </fieldset>
}

多田！您现在拥有一个可重用的组件，它具有自己的功能，并且可以容纳任何 children.

所以重点是：this.props.children可以在child仁根本不是那么重要的时候使用！强调其实可以在组件本身上，而 children 是它恰好容纳的任意组件。它们甚至根本不需要与功能相关。

这个在React Native中用的比较多。许多不同的组件都有自己的功能，但可以容纳任何 children，因为它们只是 "wrapper" 个积木。

为什么要使用 this.props.children？

Why use this.props.children?

javascript

reactjs

object-composition