关于前端:代码抽象抽象成公共组件

要实现如下图所示的成果

最开始是这样写的：

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>
    </>
)

然而这样写很容易就发现，代码呈现了大量的反复，所以这里能够把代码形象成一个 公共组件。

在形象时须要留神须要把哪些属性给形象进去，应该把与 上下文无关 的局部形象进去，这里的就是，Tooltip、a、Icon、Divider、type=”vertical”，其余的比方，图标的款式、点击事件、title，这些属性就须要父组件传递到公共组件外面。

import React, {PureComponent, Fragment} from 'react';
import {Icon, Tooltip, Divider} from 'antd';

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}
            </>
        )
    }
}
export default Action;

const actionList = [
    {
        title: '批改',
        type: 'edit',
        onClick: this.handleEdit
    },
    {
        title: '查看',
        type: 'eye',
        onClick: this.handleInfo
    },
    {
        title: '执行',
        type: 'play-circle',
        onClick: this.handleWork
    },
    {
        title: 'bug 列表',
        type: 'unordered-list',
        onClick: this.handleBugList
    },
    {
        title: '执行列表',
        type: 'unordered-list',
        onClick: this.handleWorkList
    },
    {
        title: '删除',
        type: 'delete',
        onClick: this.handleDelCase
    },
]
....
<Action actions={actionList} data={record} />