react两个类似组件问题

Question

如上两图，第一张是添加，第二个是添加后查看，两个表单一样，但第二个可以修改，提交的ajax地址不一样，并且初始化状态也不一样，其余两个组件可以说是一样的，怎么不写两个组件，有公用的方法吗？

Answer 1

粗略一想，如果用redux的话，先弹出add的diag，收集用户输入，点提交发POST请求，如果API成功，当前的redux中的store中的这个state就变成了add成功的那条记录，diag不用消失，print一个消息说提交成功 。store中有个动词比如perform action之类的动词变成'update' ，这时候再提交给到API 封装中的function，会根据这个action分支到 put/patch api

Answer 2

不一样的东西都当做 prop 由父组件传进去

Answer 3

ajax地址不一样，可以通过调用父组件方法解决。
A组件： this.props.postData();
B组件： this.props.postData();

初始化状态不一样可以通过传入不同的props解决
比如

Answer 4

prop 设计一下，例如这样

• type，enum('create','update')

• data，type === 'create' 时，传个 null，当 type === 'update' 传表单初始数据。

• onOk，根据 type 判断一下请求哪个接口，发起请求即可。