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

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，“当您不知道将传递什么子项时。”但是从技术上讲，您永远不会真正知道需要更多或不同 child 的生产线会发生什么变化。所以这是非常模棱两可的。

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

这篇文章展示了如何根据组件的类型添加/删除传递给这些“未知 child ”的 Prop ，这很简洁(在构建第三方组件时可能是个好主意)。

到目前为止，我最大的收获是当您指定 this.props.children 时，您将控制 child 的权力交给了 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>

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

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

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

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

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

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

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

所以重点是:this.props.children 可以在 child 根本不是那么重要的时候使用!重点实际上可以只放在组件本身上，而 child 是它恰好包含任意组件。它们甚至根本不需要与功能相关。

这在 React Native 中被大量使用。许多不同的组件都有自己的功能，但可以容纳任何子组件，因为它们只是“包装器”构建 block 。