如上两图,第一张是添加,第二个是添加后查看,两个表单一样,但第二个可以修改,提交的ajax地址不一样,并且初始化状态也不一样,其余两个组件可以说是一样的,怎么不写两个组件,有公用的方法吗?
prop 设计一下,例如这样
type,enum('create','update')
data,type === 'create'
时,传个 null
,当 type === 'update'
传表单初始数据。
onOk,根据 type
判断一下请求哪个接口,发起请求即可。
ajax地址不一样,可以通过调用父组件方法解决。
A组件: this.props.postData();
B组件: this.props.postData();
初始化状态不一样可以通过传入不同的props解决
比如
不一样的东西都当做 prop
由父组件传进去
粗略一想,如果用redux的话,先弹出add的diag,收集用户输入,点提交发POST请求,如果API成功,当前的redux中的store中的这个state就变成了add成功的那条记录,diag不用消失,print一个消息说提交成功 。store中有个动词比如perform action之类的动词变成'update' ,这时候再提交给到API 封装中的function,会根据这个action分支到 put/patch api