#003 React 組件 繼承 自訂的組件

標籤：

主題：React組件 繼承 自訂的 組件一、需求說明

情況說明： 有A，B，C，D 四個組件，裡面都有一些公用的邏輯，比如 設定資料，擷取資料，有某些公用的的屬性，不想在 每一個 組件裡面寫這些屬性，怎麼辦？ 【和 物件導向的語言，C#，Java 的基類 思想是 一樣的】

如果公用的東西，是一些方法，可以 使用 React 的 Mixins（ES5） ，高階組件（ES6）【高階函數不太瞭解，如何使用，去找下資料 】

但是如果有公用的屬性，那麼就有點 力不從心了

在想，React 中，是否可用繼承 自訂的組件？
經過一番尋找資料，發現，React 是可以 繼承 自己定義的組件的

二、解決方案

實現的步驟很簡單，只需要 把

 

  
class Win extends React.Component
 

替換成

 

  
class Win extends BaseWin
 

1. 例子代碼

 

  
import React from ‘react‘
  

  
/**
  
 * 所有彈框的基類
  
 */
  
class BaseWin extends React.Component {
  
 constructor(props) {
  
 super(props);
  
 this.name = ‘zhongxia‘;
  
 this.state = {};
  
 }
  
 common() {
  
 alert(‘this is a common function!‘)
  
 }
  
}
  
export default BaseWin;
 

 

  
import React from ‘react‘
  
import BaseWin from ‘./baseWindow‘
  

  
class Win extends BaseWin {
  
 constructor(props) {
  
 super(props);
  
 this.state = {
  
 ...this.props
  
 };
  
 console.log(this.name);
  
 this.common();
  
 }
  
 getData() {
  
 return this.state;
  
 }
  
 render() {
  
 this.state.node.model.set({name: ‘zhongxia‘, age: 17})
  
 return (
  
 <div className="pop-dialog">
  
 <h2>彈框1</h2>
  
 <form>
  
 <label htmlFor="">使用者名稱：</label><input value={this.state.name} type="text"/>
  
 <label htmlFor="">密碼：</label><input type="password" value={this.state.password}/>
  
 </form>
  
 </div>
  
 );
  
 }
  
}
  

  
export default Win;
 

2. 執行個體化 React 組件的順序 和

執行個體化子類組件 ==》 建構函式裡面 super(prop)的時候去執行個體化 父類組件 ==》 父類組件執行個體化結束 ==》 子類組件執行個體化結束

啟動並執行：

1. 子類建構函式

2. super(props) 執行個體化父類

3. 子類建構函式結束，已經可以拿到父類的屬性和方法

4. 子類執行個體開始渲染頁面

來自為知筆記(Wiz)

#003 React 組件 繼承 自訂的組件