3

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

这实际上是一个带有子问题的两部分。

    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，“当你不知道会通过什么孩子时”。但从技术上讲，您永远不会真正知道需要更多或不同孩子的变化可能会发生。所以这很模棱两可。

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

本文展示了如何根据组件的类型添加/删除传递给这些“未知子项”的道具，这很简洁（当您构建第三方组件时可能是一个好主意）。

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

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

请举例！

4

1 回答 1

3

我喜欢将组件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 内容进行分组。它的子元素与它的功能完全无关。

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

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

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

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

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

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

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

于 2016-10-26T18:36:05.967 回答