React從超類繼承html

Question

我正在構建一系列小工具，並希望有一個超類，其中定義了一些常規小工具UI，例如標題欄容器最小/最大/關閉按鈕以及可能的頁腳和僅內容小工具的區域在子類中定義。

有什麼建議嗎？

謝謝

Answer 1

我不認爲你需要在這裏繼承使用。關於Composition vs Inheritance的React Docs有很好的討論。

這聽起來像你應該有一個'父'組件定義頁眉/頁腳等，props.children呈現內容。例如：

HTML

<Gadget> 
    <GadgetOne></GadgetOne> 
</Gadget> 

JS

function Gadget(props) { 
    return (<div><header />{props.children}<footer /></div>); 
} 

function GadgetOne(props) { 
    return (<div>...</div>); 

Answer 2

我找到了答案自己：
對於超類：

export default class Gadget extends React.Component{ 
    renderHeader() { 
     return (
      <div>header</div> 
     ) 
    } 
    renderMe() { 
     return null; 
    } 
    render() { 
     return (
      <div> 
       {this.renderHeader()} 
       {this.renderMe()} 
      </div> 
     ) 
    } 

} 

對於子類：

import Gadget from '../../../../common/Gadget' 
class ENGAlertsGadget extends Gadget{ 
    /** 
    * render 
    * @return {ReactElement} markup 
    */ 
    renderMe(){ 

     //... 
     return (
      <div id="ENGAlerts" style={{"height":"250px", "backgroundColor":"#58D3F7", "borderRadius":"10px", "margin":"9px", "padding":"9px"}}>  

      </div> 
     ) 
    } 
} 

HTML：

​​

的關鍵點是
- HTML代碼沒有冗餘
- 你永遠不希望公開超類中的HTML