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，“当你不知道孩子会被传递的时候。”但从技术上讲，你永远不知道哪些变化可能需要更多或不同的孩子。所以这很模糊。

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

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

到目前为止，我最重要的一点是，当你指定这个时，你就会把孩子的权力交给父母。这个孩子 这是一个很好的理由还是只是副产品？（例如：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内容进行分组的某些属性。它的子元素与它的功能完全无关。

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

假设我们想要一个基于HTML ReactFieldset的特殊fieldset组件，它具有自己的功能。我不打算全力以赴，因为谁有时间？但是想象一下，你创建了一个ReactFieldset组件，它有一堆自己的功能：它可以崩溃，它可以移动，它可以做各种各样的事情！它也可以包含任何内容。

那么，你需要做的就是render函数：

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

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

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

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

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

1 个答案: