React:当我们需要React.Children api时,用例是什么

Question

只是想找到React.Childrenapi的任何用例.阅读文档令人困惑.(React v.15.2.0)

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

他们说,这this.props.children就是"不透明的数据结构".但是在使用chrome dev工具进行调试时,它看起来就像children是一个数组.所以函数喜欢React.Children.map或者React.Children.toArray没有那么有意义,因为可以使用Array.prototype.map而不是第一个函数,而last可以生成与原始children属性相同的结果.

对我来说,看起来文档已经过时了(我没有使用反应0.14.*​​,所以我不知道那里有什么情况),或者我错过了什么.如果有人能解释,会很高兴.

谢谢.

Answer 1

React.Children正如文档所解释的，是组件子组件的一组实用程序。在本例中（jsx）：

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

你的divschildren将是两个 s 的数组span。考虑一个自关闭组件：

<div>
   <SomeCustomElement/>
</div>

在这种情况下，div有一个孩子，但会this.props.children是。因此，在某些情况下尝试调用会引发错误，因为该prop 不遵循严格的类型约定。SomeCustomElementnullthis.props.children.mapchildren

React.Children做两件事。它通过提供一些通用工具来“修复”（有些人会说规避）前面提到的问题，这些工具允许您不关心是否this.props.children是null、数组、带键的片段或其他任何内容if，这样您就不会用switch等填充您的组件只是为了迭代它的孩子。此外，它还确保了向前兼容性。可以说，更好的方法就是坚持严格的类型，提供一个空数组而不是null一个包含单个元素的数组（如果唯一的子元素是带键的片段）等等。