React从超类继承html
问题描述:
我正在构建一系列小工具,并希望有一个超类,其中定义了一些常规小工具UI,例如标题栏容器最小/最大/关闭按钮以及可能的页脚和仅内容小工具的区域在子类中定义。React从超类继承html
有什么建议吗?
谢谢
答
我不认为你需要在这里继承使用。关于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>);
答
我找到了答案自己:
对于超类:
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
+0
我在https://github.com/coolshare/ReactReduxPattern有详细的讨论 –
你的解决方案是第一个解决方案来直到我的想法,但我确实认为这是一个继承模式,而不是组成(这会导致大量的冗余代码)。我自己找到了解决方案。请参阅下面的答案。希望有人有更好的。 –