今天干活感悟，你不辜负代码，代码也就不会辜负你。常常感谢小师傅，严格要求我。所以，现在每当做新需求或者扩展自己的代码时，对我来说都是好消息。而最不想做的，就是去扩展别人的代码。所以，今天从自身角度和大家聊聊好代码中的一招---抽离组件。

背景

难活累活不可怕，最怕是脏活累活。今天接到了一个需求，修改点是上个版本刚刚做完的。上一版本中要求甲类数据只能映射到甲类，乙类只能映射到乙类。这次要求甲乙都可以分别映射成甲类或者乙类。繁琐点在于映射存在于不同业务场景下，目前就有A、B、C三个场景。而且每个中还略有不同。

上版本

由于开发，高度相似的功能，会提取成为一个函数。需要渲染相同样式的部分，会封装成统一个组件。而其中数据的处理也就放在了组件内部进行。因此上版本中已经将映射相关逻辑抽离到了一个组件--InteractiveComponents中，然后映射中需要的左右输入框分别用input中实现。业务难点在于两侧数据的处理，但为了说明组件封装的好处。下面将直接用Alist,Blist代替，减少大家对数据本身的关注。

本版本

由于上个版本良好的基础，所以映射规则的切换我们直接在InteractiveComponents中内完成即可。然后所用到的地方全部生效，因此较少编码就搞定了这个需求。

代码说明

上一个版本代码：

import { Select, Option } from 'antd';

function InteractiveComponents(list) {
    return <div className="interactive-component">
        <Select className='left-input'>
            { list.map(a => {
                return <Option value={a.value} label={a.label}>{a.label}</Option>
            })}
        </Select>
        <span>'--'</span>
        <Select className='right-input'>
            { list.map(a => {
                return <Option value={a.value} label={a.label}>{a.label}</Option>
            })}
        </Select>
    </div>
}

本次需求代码：

import { Select, Option } from 'antd';

function InteractiveComponents(AList, BList) {
    const list = [...AList, ...BList];

    const getOptions = () => {
        return list.map(a => {
            return <Option value={a.value} label={a.label}>{a.label}</Option>
        });
    }

    return <div className="interactive-component">
        <Select className='left-input'>
            { getOptions }
        </Select>
        <span>'--'</span>
        <Select className='right-input'>
            { getOptions }
        </Select>
    </div>
}