反应：当我们需要React.Children API时，有什么用例

只是试图找到React.Children api的任何用例。阅读文档令人困惑。（阵营诉15.2.0）反应：当我们需要React.Children API时，有什么用例

https://facebook.github.io/react/docs/top-level-api.html#react.children

在这里，他们说，这是this.props.children'不透明数据结构'。但是在使用chrome开发工具进行调试时，看起来像children是一个数组。所以像React.Children.map或React.Children.toArray这样的函数没什么意义，因为可以使用Array.prototype.map来代替第一个函数，而最后一个产生的结果与原始的children属性相同。

对我来说，它看起来像文档已过时（我没有使用反应0.14。*，所以我不知道有什么情况），或者我失去了一些东西。如果有人能解释，会很高兴。

谢谢。

来源

2016-07-13 berliner

React.Children正如文档解释的那样，是组件子项的一组实用程序。在这种情况下（JSX）：

<div> 
    <span>Foo</span> 
    <span>Bar</span> 
</div>

你div的children将是两点span S的阵列。考虑一个自闭部：

<div> 
    <SomeCustomElement/> 
</div>

在这种情况下，div有一个孩子，但this.props.children在SomeCustomElement将null。因此，试图拨打this.props.children.map会在某些情况下发生错误，因为children支持不遵循严格的键入约定。

React.Children做了两件事。它通过提供一些常用工具“修复”（有些人会说绕过）前面提到的一些常用工具，这些工具可以让您不在乎this.props.children是否为null，数组，键控片段或其他什么，因此您不会使用if填充组件，switch等，只是为了迭代它的孩子。此外，它确保向前兼容性。有争议的是，更好的方法是坚持严格的类型，提供一个空数组而不是null，如果唯一的子元素是一个键控片段等等，则该数组具有单个元素。

来源

2016-07-13 14:35:41 Dencker

JavaScript中没有任何内容是非常不透明的。此处的协议是React团队认为children的当前实施方式与实施细节完全相同。

他们告诉你将数据视为不透明，只能通过他们的React.Children API访问它，以便他们可以自由地在将来更改底层数据结构，而不必担心打破现有应用程序。

如果您不使用React.Children API，而是使用底层Array原型方法，那么您使用的是不受支持的实现细节，并且可能会导致代码停止使用某个新版本的React。

来源

2016-07-13 14:33:09 Brandon

这两个答案都很好，但我认为，Dencker的回答更好地解释了这个API背后的原因。谢谢！ – berliner

反应：当我们需要React.Children API时，有什么用例

回答

相关问题