React中的this.props.children

一. this.props.children用法

this.props.children表示组件的所有子节点。

1.1 App.js 组件

import React from 'react';
import Page from './components/Page'
function App() {
  return (
    <Page>
      <div>hh</div>
      <div>cc</div>
    </Page>
  );
}
export default App;

1.2 Page.jsx 组件

import React, {Component,Fragment} from 'react';
class Page extends Component {
    render() { 
        return (
            <Fragment>
                <div>{this.props.children}</div>
                {/* {React.Children.map(this.props.children, (item) => {
                    return <div>{item}</div>
                })} */}
            </Fragment>
        );
    }
}
 
export default Page;

二. 为什么用React.Children.map(props.children, () => )，而不是props.children.map(() => )?

因为不能保证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去遍历它。