react的学习之路——this.props.children是个啥东西

这是我第一次写博客，写博客的主要目的是为了记录我的学习情况掌握情况，如果有不对的，请各位大佬举出来，我一定会进行验证和纠正，希望大家能够一同进步

this.props.children的用法

具我们所知，props是我们从上个组件传值传下来的集合，react是单向数据流，每一个props都应该对应的是从上个组件传过来的值。但是这里有一个例外，那就是this.props.children，如下所示

  import React, { Component } from 'react'
  class Test extends Component {
    render() {
      return (
        <div>
          <h1>Hello World</h1>
          { this.props.children }
        </div>
      )
    }
  }
  export default _ => {
      return (
        <div>
         {/* 那么这个时候this.props.children指的就是一个对象，这个对象里面的内容是字符串a */}
          <Test>a</Test> 
          {/* 那么这个时候this.props.children指的就是undefined */}
          <Test />
          {/* 那么这个时候this.props.children指的就是一个数组，并且这个数组里面包含的就是Test所包含的子节点*/}
          <Test>
            <div>1</div>
            <div>2</div>
          </Test>
        </div>
      )
  } 

this.props.children的处理

既然我们知道了this.props.children是什么，那我们就要知道改怎么去处理他。据上面提到this.props.children既可以是对象，数组，undefined，那么按照平时处理数据的方式进行处理他的话，会显得很麻烦，那么我们就可以通过react官方提供的React.Children去进行处理，并且如果你想遍历他的化，可以通过React.Children.map去遍历他