HOC

React中调用组件的时候可以在组件内写值，这时候会在组件中的props.chilren中显现，具体可参考children in JSX。但是这时候会有一个问题，无法给children传props。如下：

function Child1() {
  return (
    <p>1</p>
  )
}

function Child2() {
  return (
    <p>2</p>
  )
}

function Father(props) {
  return (
    <div>
      {props.children}
    </div>
  )
}

function APP() {
  return () => (
    <Father>
      <Child1 />
      <Child2 />
    </Father>
  );
}

现在我们需要给在Father组件中给Child1和Child2传值。这个时候我们可以使用React的API实现，如下:

function Father(props) {
  return (
    <div>
      {
        React.Children.map((child, index) => {
          if (!React.isValidElement(child)) {
            return null;
          }

          const childProps = {
            index,
          };

          return React.cloneElement(child, childProps);
        })
      }
    </div>
  )
}

简单解释一下上面代码，因为props.children不是一个数组，所以不能直接使用map方法，我们可以把它转成数组也可以直接使用React.Children.map。然后React.cloneElement会克隆一个组件，并且可以修改一些自定的props。

上面的写法只适用于一层级的children。不能嵌套如：

<Father>
  <Fragment>
    <Child1 />
    <Child2 />
  </Fragment>
</Father>

如果是这样的层级那上面的写法的props就会只传递到Fragment上。要注意这个。