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