一个使用-render-props-而不是hooks的场景

自定义列功能

/*
 * @File: 自定义表格列
 * @Author: lintao.wang
 * @Date: 2020-01-03 15:08:32
 * @Last Modified by: lintao.wang
 * @Last Modified time: 2020-01-03 17:16:30
 * @Usage
 *
      <CustomColumn columns={props.columns}>
        {(columns: ColumnProps<any>[]) => (
          <Table
            className={`${styles.mTaskTable} ${className}`}
            expandRowByClick
            expandedRowKeys={expandedRowKeys}
            onExpandedRowsChange={onExpandedRowsChange}
            {...restProps}
            columns={columns}
          />
        )}
      </CustomColumn>
*
 */
import React, {useState, useEffect} from 'react';
import {Popover, Button, Checkbox} from 'antd';
import {ColumnProps} from 'antd/lib/table';
import _ from 'lodash';
import styles from './index.less';

const CustomColumn = (props: {columns: ColumnProps<any>[];
  defaultColumns?: Array<ColumnProps<any> | string>;
  children: (columns) => React.ReactNode;
}) => {const { columns = [] } = props;
  const [column, setColumn] = useState(columns);
  const onChange = value => {const { columns = [] } = props;
    const column = columns.filter(item => value.includes(item.dataIndex) || value.includes(item.title),
    );
    setColumn(column);
  };

  let {defaultColumns = [] } = props;
  useEffect(() => {
    defaultColumns = defaultColumns?.length ? defaultColumns : columns;
    const defaultValue = defaultColumns
      .map(item => (typeof item === 'string' ? item : item?.dataIndex || _.toString(item?.title)))
      .filter(item => column.some(cell => cell.dataIndex === item || cell.title === item));
    onChange(defaultValue);
  }, []);

  const renderContent = () => (
    <Checkbox.Group
      options={columns?.map((item: ColumnProps<any>, index) => ({
        label: item.title || '',
        value: item.dataIndex || _.toString(item.title) || index,
      }))}
      value={column.map(item => item.dataIndex || _.toString(item.title))}
      onChange={onChange}
    />
  );

  return (<div className={styles.cCustomColumn}>
      <Popover
        content={renderContent()}
        title="请选择要展示的列名"
        trigger="click"
        overlayClassName={styles.mCustomPopover}
      >
        <Button icon="setting"> 自定义列 </Button>
      </Popover>
      {props.children(column)}
    </div>
  );
};

export default CustomColumn;