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