React组件进阶

1、 props 深入

1.1 children 属性

• children 属性：表示组件标签的子节点。当组件标签有子节点时，props 就会有该属性
• children 属性与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数，jsx）

如果我们像上面 ListItem 标签里面写上东西 ，这样就相当于有了一个字节点，这样就会自动拥有了了children 属性，我们到页面上看看。

1.2 props 校验

• 对于组件来说，props 是外来的，无法保证组件使用者传入什么格式的数据 。
• 如果传入的数据格式不对，可能会导致组件内部报错 。
• 关键问题：组件的使用者不知道明确的错误原因。

看下面的例子。

我们可以看到了arr.map ，它调用的是map方法，那arr 就得是一个数组，但是大家看下面，它给我们传过来得是也给Number,Number根本就没有map方法，那这个时候就一定会报错。

面对这样得我们该如何解决呢？ 这个时候我们就要进行 prop校验。我们来看看prop校验该怎么去做。

1、安装属性校验包：yarn add prop-types