主题: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 组件 继承 自定义的组件的更多相关文章

  1. 基于React.js网页版弹窗|react pc端自定义对话框组件RLayer

    基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react. ...

  2. 22Flutter中的常见的按钮组件 以及自定义按钮组件

    /* Flutter中的常见的按钮组件 以及自定义按钮组件 一.Flutter中的按钮组件介绍 Flutter里有很多的Button组件,常见的按钮组件有:RaisedButton/FlatButto ...

  3. Flutter 中的常见的按钮组件 以及自定义按钮组件

    Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton. IconButton.OutlineButton.ButtonBar.Float ...

  4. MIP组件开发 自定义js组件开发步骤

    什么是百度MIP? MIP(Mobile Instant Pages - 移动网页加速器)主要用于移动端页面加速 官网参考:https://www.mipengine.org/doc/00-mip-1 ...

  5. 浅尝Spring注解开发_自定义注册组件、属性赋值、自动装配

    Spring注解开发 浅尝Spring注解开发,基于Spring 4.3.12 包含自定义扫描组件.自定义导入组件.手动注册组件.自动注入方法和参数.使用Spring容器底层组件等 配置 @Confi ...

  6. Swift - 继承UIView实现自定义可视化组件(附记分牌样例)

    在iOS开发中,如果创建一个自定义的组件通常可以通过继承UIView来实现.下面以一个记分牌组件为例,演示了组件的创建和使用,以及枚举.协议等相关知识的学习. 效果图如下:    组件代码:Score ...

  7. day58——模板继承、组件、自定义标签和过滤器、inclusion_tag、静态文件配置、url别名和反向解析、url命名空间

    day58 模板相关 模板继承(母版继承) 1. 创建一个xx.html页面(作为母版,其他页面来继承它使用) 2. 在母版中定义block块(可以定义多个,整个页面任意位置) {% block co ...

  8. 工程日记之HelloSlide(1):Swift自定义可视化组件的方法(继承UIView和在StoryBoard中设置)

    需求描述 HelloSlide是把文本自动转化成幻灯片的软件,在幻灯片中我们有SmartArt:各种各样的几何形状,并且可以自定义大小和颜色,放在幻灯片不同的位置. 为了在我们的软件中实现类似的效果, ...

  9. react hooks 如何自定义组件(react函数组件的封装)

    前言 这里写一下如何封装可复用组件.首先技术栈 react hooks + props-type + jsx封装纯函数组件.类组件和typeScript在这不做讨论,大家别白跑一趟. 接下来会说一下封 ...

随机推荐

  1. win8.1弹框

    在winform或者wp8中用MessageBox.Show()弹框,但是wp8.1中已经不存在了 private async void btn_Click(object sender, Routed ...

  2. C#语法之委托和事件

    从大学就开始做C#这块,也做C#几年了,最近又从ios转回.Net,继续做C#,之前也没有写博客的习惯,写博客也是从我做ios的时候开始的,现在既然又做回了.net,那就写点关于.Net的博客,可能在 ...

  3. java date相关

    public static void getPreDay() throws ParseException{     String dateStr="2013-1-1";     D ...

  4. [转载]Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件

    Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...

  5. ADO调用分页查询存储过程

    一.分页存储过程 ----------使用存储过程编写一个分页查询----------------------- set nocount off --关闭SqlServer消息 --set nocou ...

  6. docker 简单安装java web项目

    前言: Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行 ...

  7. AE开发流程

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  8. 【转】SpringBoot系列之—瘦身部署

    一.前言 SpringBoot部署起来虽然简单,如果服务器部署在公司内网,速度还行,但是如果部署在公网(阿里云等云服务器上),部署起来实在头疼: 编译出来的 Jar 包很大,如果工程引入了许多开源组件 ...

  9. Java Tools &Tools APIs

    java 启动Java应用程序 javac Java编译器javac读取用Java编写的源文件,并将它们编译为字节码类文件. 用法: javac <options> <source ...

  10. 洛谷P4783 【模板】矩阵求逆(高斯消元)

    题意 题目链接 Sol 首先在原矩阵的右侧放一个单位矩阵 对左侧的矩阵高斯消元 右侧的矩阵即为逆矩阵 // luogu-judger-enable-o2 #include<bits/stdc++ ...