本文主要是React.Children.map的应用。

React.Children.map语法

React.Children.map(children, function(item, index) {}, context)

React.Children.map会递归遍历所有child(叶子节点)，并展开所有children，如果children是null or undefined，则返回null or undefined。

官方文档 reactjs.org/docs/react-…

小试牛刀 React.Children.map

// 输出 [1, 2, 3]
React.Children.map([1,2,3], function(item,index) {
    return item;
})
// 输出 [1, 2, 3]
React.Children.map([1,[2,[3]]], function(item,index) {
    return item;
})
// 输出 [1, 2, 3]
React.Children.map([1,2,3], function(item,index) {
    return [[[item]]];
})
// 输出 [1, 1, 2, 2, 3, 3]
React.Children.map([1,2,3], function(item,index) {
    return [item, item];
})
// 输出  [1, "hello", 2, 3, "hello"]
React.Children.map([1,2,3], function(item,index) {
    if(index % 2 === 0) {
        return [item, 'hello'];
    }
    return item;
})
// 输出  null
React.Children.map(null, function(item,index) {
    return item;
})

实战给多个操作按钮添加分割线，效果如下

Join组件

import React from 'react';
import {Divider} from 'antd';

export default function Join({children, divider = <Divider type="vertical" style={{borderColor: 'red'}} />}) {
  const len = React.Children.count(children)
  return React.Children.map(children, (child, index) => {
    if (index < len -1) {
      return [child, divider];
    }
    return child;
  })
}

使用示例

import React from 'react';
import Join from '@/components/WithDivider';

function OperateGroup() {
  function onClick(type) {
    console.log(type)
  }
  return <div style={{padding: 10, backgroundColor: '#fff'}}>
    <Join>
      <a onClick={() => onClick('detail')}>查看详情</a>
      <a onClick={() => onClick('add')}>新增</a>
      <a onClick={() => onClick('modify')}>修改</a>
      <a onClick={() => onClick('delete')}>删除</a>
    </Join>
  </div>
}

export default OperateGroup

到此类似数组join方法的组件版（Join）实现完成。

本文链接

www.hijs.ren/article/blo…