【React】你不了解但非常有用的API: React.Children 与 React.cloneElement

React.Children

React.Children 提供了用于处理 props.children 不透明数据结构的实用方法。

React.Children.map
React.Children.map(children, function[(thisArg)])

在 children 里的每个直接子节点上调用一个函数。如果 children 是一个数组，它将被遍历并为数组中的每个子节点调用该函数。如果子节点为 null 或是 undefined，则此方法将返回 null 或是 undefined，而不会返回数组。

【注意】
如果 children 是一个 Fragment 对象，它将被视为单一子节点的情况处理，而不会被遍历。

cloneElement()

React.cloneElement(
  element,
  [props],
  [...children]
)

以 element 元素为样板克隆并返回新的 React 元素。返回元素的 props 是将新的 props 与原始元素的 props 浅层合并后的结果。新的子元素将取代现有的子元素，而来自原始元素的 key 和 ref 将被保留。

React.cloneElement() 几乎等同于：

<element.type {...element.props} {...props}>{children}</element.type>

但是，这也保留了组件的 ref。这意味着当通过 ref 获取子节点时，你将不会意外地从你祖先节点上窃取它。相同的 ref 将添加到克隆后的新元素中。

下面介绍有趣的玩法。
以下代码，都可以直接复制到codesandbox，查看效果： https://codesandbox.io/s/fe4n6

栅格Card对齐

栅格布局下，如果每个元素是个Card，内容是后端给的，他们的高度不统一，可能出现参差不齐的情况：

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import {
    Row, Col } from 'antd';

const App = (props) => {
   
  const a = new Array(props.length).fill('A').join(' ');
  return (
    <div style={
   {
   background: 'red'}}>
      {
   a}
    </div>
  );
};

const data = [20, 30, 40, 50]<