React更喜欢组合而不是继承。使用所有反应组件所具有的子道具。
export default function PageTemplate() {
return (
<div className="layout">
<LeftMenu />
<div className="content">
<TopMenu />
<div id="other-contents">
// Contents goes here
</div>
</div>
</div>
);
}
export default function Index() {
return (
<div className="layout">
<LeftMenu />
<div className="content">
<TopMenu />
<div id="other-contents">
<h2>I am Index Page<h2/>
</div>
</div>
</div>
);
}
正如你所看到的，我的大部分内容都在#其他内容中，我将对每一页重复PageTemplate，我想知道是否有办法只重复使用PageTemplate。与其重复代码，我只需要做一些类似扩展/继承/任何可能的事情，并减少Index中的代码
我相信使用基于类的组件更容易实现这一点。但我想知道是否有基于功能的解决方案
export default function PageTemplate({ children }) {
return (
<div className="layout">
<LeftMenu />
<div className="content">
<TopMenu />
<div id="other-contents">
{children}
</div>
</div>
</div>
);
}
用法：
<PageTemplate>
// <-- render any content you want here
</PageTemplate>