Question

我正在构建一系列小工具，并希望有一个超类，其中定义了一些通用小工具UI，例如标题栏容器最小/最大/关闭按钮，可能是页脚，只定义了小工具的内容区域在子类中。

有什么建议吗？

感谢

Answer 1

我认为你根本不需要在这里使用继承。关于Composition vs Inheritance的反应文档有一个很好的讨论。

听起来我应该有一个定义页眉/页脚等的“父”组件，以及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：

<ENGAlertsGadget/>

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

React从超类继承html

2 个答案: