Reactjs React从超类继承html

我正在构建一系列小工具，并希望有一个超级类，其中定义了一些通用小工具UI，例如页眉栏容器min/max/close按钮和页脚，并且在子类中仅定义小工具的内容区域

有什么建议吗

---

谢谢

我认为您根本不需要在这里使用继承。关于这个问题，有一个很好的讨论

在我看来，你应该有一个“父”组件来定义页眉/页脚等，还有

props.children

来呈现内容。例如：

html

js

功能小工具（道具）{
返回（{props.children}）；
}
功能小工具一（道具）{
回报率（…）；

我认为您根本不需要在这里使用继承。关于React文档有一个很好的讨论

在我看来，您应该有一个“父”组件来定义页眉/页脚等，以及

props.children

来呈现内容。例如：

html

js

功能小工具（道具）{
返回（{props.children}）；
}
功能小工具一（道具）{
回报率（…）；

我自己找到了答案：
对于超级类：

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

}

导出默认类Gadget扩展React.Component{
renderHeader（）{
返回(
标题
)
}
renderMe（）{
返回null；
}
render（）{
返回(
{this.renderHeader（）}
{this.renderMe（）}
)
}
}

对于子类：

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>
        )
    }
}

从“../../../../common/Gadget”导入小工具
类ENGAlertsGadget扩展小工具{
/**
*渲染
*@return{ReactElement}标记
*/
renderMe（）{
//...
返回(
)
}
}

HTML:

关键点是
-HTML代码不是多余的
-您永远不想在HTML中公开超类

我自己找到了一个答案：
对于超级类：

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

}

导出默认类Gadget扩展React.Component{
renderHeader（）{
返回(
标题
)
}
renderMe（）{
返回null；
}
render（）{
返回(
{this.renderHeader（）}
{this.renderMe（）}
)
}
}

对于子类：

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>
        )
    }
}

从“../../../../common/Gadget”导入小工具
类ENGAlertsGadget扩展小工具{
/**
*渲染
*@return{ReactElement}标记
*/
renderMe（）{
//...
返回(
)
}
}

HTML:

关键点是
-HTML代码不是多余的

---

-您永远不想在HTML中公开超类

您的解决方案是我想到的第一个解决方案，但我确实认为这是一种继承模式，而不是组合模式（这会导致大量冗余代码）。我自己找到了一个解决方案。请参阅下面的答案。希望有人有更好的解决方案。您的解决方案是我想到的第一个解决方案，但我确实认为这是一种继承模式，而不是组合模式（这会导致大量冗余代码）。我自己找到了一个解决方案。请参阅下面的答案。希望有人有更好的解决方案。

<ENGAlertsGadget/>