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

要实现如下图所示的成果

最开始是这样写的：

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