代码抽象：抽象成公共组件

要实现如下图所示的效果

最开始是这样写的：

renderAction = (text, record) => (
    <>
        <Tooltip title='修改'>
            <a onClick={() => this.handleEdit(record)}>
                <Icon
                    type="edit"
                />
            </a>
        </Tooltip>
        <Divider
            type="vertical"
        />
        <Tooltip title='查看'>
            <a onClick={() => this.handleInfo(record)}>
                <Icon
                    type="eye"
                />
            </a>
        </Tooltip>
        <Divider
            type="vertical"
        />
        <Tooltip title='执行'>
            <a onClick={() => this.handleWork(record)}>
                <Icon
                    type="play-circle"
                />
            </a>
        </Tooltip>
        <Divider
            type="vertical"
        />
        <Tooltip title='bug列表'>
            <a onClick={() => this.handleBugList(record)}>
                <Icon
                    type="exception"
                />
            </a>
        </Tooltip>
        <Divider
            type="vertical"
        />
        <Tooltip title='执行列表'>
            <a onClick={() => this.handleWorkList(record)}>
                <Icon
                    type="profile"
                />
            </a>
        </Tooltip>
        <Divider
             type="vertical"
        />
        <Tooltip title='删除'>
            <a onClick={() => this.handleDelCase(record)}>
                <Icon
                    type="delete"
                />
            </a>
        </Tooltip>
    </>
)

但是这样写很容易就发现，代码出现了大量的重复，所以这里可以把代码抽象成一个公共组件。

抽象流程：

• 提取出重复的代码
• 将不一样的地方封装成变量
• 预设参数

抽取重复代码：

将不一样的地方封装成变量：

做完上面两步之后，就可以开始写公共组件了

class Action extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {};
    }

    default = () => {}

    render() {
        const { actions = [], data = null } = this.props;
        const renderList = actions.map((action, index) => {
            const { title = 'action', type = 'tool', onClick = this.default } = action;
            return (
                <Fragment key={title}>
                    <Tooltip title={title}>
                        <a onClick={() => onClick(data)}>
                            <Icon type={type} />
                        </a>
                    </Tooltip>
                    {
                        index !== actions.length - 1 ?
                            <Divider
                                type="vertical"
                            /> : ''
                    }
                </Fragment>
            )
        })
        return (
            <>
                {renderList}
            </>
        )
    }
}

const actionList = [
    {
        title: '修改',
        type: 'edit',
        onClick: this.handleEdit
    },
    {
        title: '查看',
        type: 'eye',
        onClick: this.handleInfo
    }
]
....
<Action actions={actionList} data={record} />

最后，就可以思考为组件增加一些预设参数。

比如，设置图标是否可以点击，这里设置了两个参数disabledKey,disabledValue

class Action extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {};
    }

    default = () => { }

    render() {
        const { actions = [], data = null } = this.props;
        const renderList = actions.map((action, index) => {
            const {
                title = 'action',
                type = 'tool',
                onClick = this.default,
                disabledKey = '',
                disabledValue = []
            } = action;
            return (
                <Fragment key={title}>
                    <Tooltip title={title}>
                        <a
                            onClick={() => onClick(data)}
                            disabled={disabledValue.indexOf(data[disabledKey]) !== -1}
                        >
                            <Icon type={type} />
                        </a>
                    </Tooltip>
                    {
                        index !== actions.length - 1 ?
                            <Divider
                                type="vertical"
                            /> : ''
                    }
                </Fragment>
            )
        })
        return (
            <>
                {renderList}
            </>
        )
    }
}

const actionList = [
    {
        title: '详情',
        type: 'eye',
        onClick: this.handleInfo
    },
    {
        title: '作业报告',
        type: 'pie-chart',
        onClick: this.handlePush,
        disabledKey: 'state',
        disabledValue: [WORKLIST_STATE.UNCOMMIT.key]
    }
]

参数说明：

参数	是否必须	类型	说明
actions	必须	Array	需要生成的操作
data	必须	Object	传入点击事件的参数

actions里的每一个元素item为Object类型

属性	是否必须	类型	说明
title	必须	string	操作提示字段
type	必须	string	操作的图标样式
onClick	必须	function	操作的点击事件
disabledKey	可选	string	data中的属性名，决定图标是否可点击
disabledValue	可选	Array	其中的每个元素为data中属性名为disabledKey的值,当这个值在disabledValue中