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

要实现如下图所示的效果

最开始是这样写的：

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里的每一个元素item为Object类型

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