如何完整的编写一个React通用组件？

React组件概念想必大家都熟悉了，但是在业务开发过程中，面对通用的业务，怎么编写一个通用的React业务组件呢？本文以实际案例说明，如何编写一个通用的业务组件。

案例背景

实现一个如图所示的组件，可以添加对组件进行添加和删除

实现思路

• 实现组件的界面样式
• 实现组件的基本功能
• 考虑通用型和可扩展性

实现基本的界面样式

实现上面的界面展示，需要三个方面的东西

• 一个文本框
• 一个➖操作
• 一个➕操作
  jrs可以自己编写样式，也可以引用通用的组件，本文偷个懒，决定引用现成的antd的组件

import React, { Component } from 'react';
import {Input, Icon} from 'antd';
import PropTypes from 'prop-types';

class List extends Component{
    render() {
        let iconStyle = {
            del: {
               color: 'red', marginLeft: '0.2%'
            },
            add: {
               color: 'grey', marginLeft: '0.2%'
            }
        }
        return <div style = {
  {display: 'flex', marginLeft:'10px'}}>
                   <Input/>
                   <Icon type="minus-circle" theme="outlined" style = {iconStyle.del}/>
                   <Icon type="plus-circle" theme="outlined" style = {iconStyle.add}/>
               </div>
    }
}

上面就把基本的样式搞定了，这离我们想要的还缺一些基本的功能

实现基本功能

组件处于编辑状态的时候

• 点击➕，增加组件
• 点击➖，减少相应组件
• 当只有一个组件的时候，只显示➕
  组件处于非编辑状态的时候
• 输入框不能编辑
• ➕和➖都不展示
  实现的思路就是，组件内部维护一个list，然后每次增加和删除的时候，对list进行增加和删除，然后渲染整个组件。

class List extends Component{
    constructor(props) {
        super(props);
        this.state = {
            list : [1]
        }
    }
    add = (key) => () => {
        let list = this.state.list;
        list.push(1);
        this.setState({
            list: list
        });
    }
    del = (key) => () => {
        let list = this.state.list;
        list.splice(key, 1, 0);
        this.setState({
            list: list
        });
    }
    renderList = () => {
        let list = this.state.list;
        let renderList = [];
        let len = list.length;
        let delShow = list.reduce((total, value) => total + value);
        let iconStyle = {
            del: {
                color: 'red', marginLeft: '0.2%'
            },
            ad