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

Posted zhongxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了#003 React 组件 继承 自定义的组件相关的知识,希望对你有一定的参考价值。

主题: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\'
  2. /**
  3. * 所有弹框的基类
  4. */
  5. classBaseWin extends React.Component{
  6. constructor(props){
  7. super(props);
  8. this.name =\'zhongxia\';
  9. this.state ={};
  10. }
  11. common(){
  12. alert(\'this is a common function!\')
  13. }
  14. }
  15. exportdefaultBaseWin;
  1. importReact from \'react\'
  2. importBaseWin from \'./baseWindow\'
  3. classWin extends BaseWin{
  4. constructor(props){
  5. super(props);
  6. this.state ={
  7. ...this.props
  8. };
  9. console.log(this.name);
  10. this.common();
  11. }
  12. getData(){
  13. returnthis.state;
  14. }
  15. render(){
  16. this.state.node.model.set({name:\'zhongxia\', age:17})
  17. return(
  18. <div className="pop-dialog">
  19. <h2>弹框1</h2>
  20. <form>
  21. <label htmlFor="">用户名:</label><input value={this.state.name} type="text"/>
  22. <label htmlFor="">密码:</label><input type="password" value={this.state.password}/>
  23. </form>
  24. </div>
  25. );
  26. }
  27. }
  28. exportdefaultWin;

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

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

运行的效果图:

1. 子类构造函数

2. super(props) 实例化父类

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

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



您可能还感兴趣

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



以上是关于#003 React 组件 继承 自定义的组件的主要内容,如果未能解决你的问题,请参考以下文章

[react] 自定义组件时render是可选的吗?为什么?

003-代码补全,运行,调试

React笔记1

React笔记1

React的class组件及属性详解!

如何将字符串呈现为自定义 React 组件?