Блог

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

Как вы можете видеть, большая часть моего содержимого содержится в #other-contents, я буду повторять PageTemplate для каждой страницы, мне интересно, есть ли способ просто повторно использовать PageTemplate . Вместо того, чтобы повторять код, я бы просто сделал что-то вроде extends / inherit /whatever possible и сократил код в Index

Я считаю, что этого легче достичь с помощью компонента на основе классов. Но мне интересно, может ли быть решение на основе функций

React предпочитает композицию наследованию. Используйте дочерние элементы, которые есть у всех компонентов react.

 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>