阅读 196

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

要实现如下图所示的效果

image.png

最开始是这样写的:

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>
    </>
)
复制代码

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

抽象流程:

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

抽取重复代码:

image.png

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

image.png

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

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可选stringdata中的属性名,决定图标是否可点击
disabledValue可选Array其中的每个元素为data中属性名为disabledKey的值,当这个值在disabledValue中
文章分类
前端
文章标签