#003 React 组件 继承 自定义的组件

Posted 2020-06-24 zhongxia

主题：React组件 继承 自定义的 组件

一、需求说明

情况说明： 有A，B，C，D 四个组件，里面都有一些公用的逻辑，比如 设置数据，获取数据，有某些公用的的属性，不想在 每一个 组件里面写这些属性，怎么办？ 【和 面向对象的语言，C#，Java 的基类 思想是 一样的】

如果公用的东西，是一些方法，可以 使用 React 的 Mixins（ES5） ，高阶组件（ES6）【高阶函数不太了解，如何使用，去找下资料 】

但是如果有公用的属性，那么就有点 力不从心了

在想，React 中，是否可用继承 自定义的组件？
经过一番查找资料，发现，React 是可以 继承 自己定义的组件的

二、解决方案

实现的步骤很简单，只需要 把

1. classWin extends React.Component

替换成

1. classWin extends BaseWin

---

1. 例子代码

1. importReact from \'react\'
3. /**
4. * 所有弹框的基类
5. */
6. classBaseWin extends React.Component{
7. constructor(props){
8. super(props);
9. this.name =\'zhongxia\';
10. this.state ={};
11. }
12. common(){
13. alert(\'this is a common function!\')
14. }
15. }
16. exportdefaultBaseWin;

1. importReact from \'react\'
2. importBaseWin from \'./baseWindow\'
4. classWin extends BaseWin{
5. constructor(props){
6. super(props);
7. this.state ={
8. ...this.props
9. };
10. console.log(this.name);
11. this.common();
12. }
13. getData(){
14. returnthis.state;
15. }
16. render(){
17. this.state.node.model.set({name:\'zhongxia\', age:17})
18. return(
19. <div className="pop-dialog">
20. <h2>弹框1</h2>
21. <form>
22. <label htmlFor="">用户名：</label><input value={this.state.name} type="text"/>
23. <label htmlFor="">密码：</label><input type="password" value={this.state.password}/>
24. </form>
25. </div>
26. );
27. }
28. }
30. exportdefaultWin;

2. 实例化 React 组件的顺序 和效果图

实例化子类组件 ==》 构造函数里面 super(prop)的时候去实例化 父类组件 ==》 父类组件实例化结束 ==》 子类组件实例化结束

运行的效果图：

1. 子类构造函数

2. super(props) 实例化父类

3. 子类构造函数结束，已经可以拿到父类的属性和方法

4. 子类实例开始渲染页面

您可能还感兴趣

1. 【GITHUB】前端技术文章汇总