Question

我不确定我是否可以对自己的想法做出反应。我阅读了多个介绍，以做出反应，并认为它应该起作用。但是，我希望熟悉反应的人对此感到放心。

我想要的东西：全局页眉和页脚，因为它们不会在我拥有的任何页面上更改。我可以用php解决它...但是我想从react开始，感觉它很适合以这种方式解决。我的意思示例：Global header and footer in HTML（基本上是我需要从react中获得的功能）

我的页脚包含某些div和UL。例如：

<div>
    <ul>
      <li></li>
    </ul>
</div>

我认为react中的一个组件可能是页脚/页眉。尝试做出反应是否可行或合理？谢谢！（我不一定希望有代码示例，而是希望它能普遍解决）

Answer 1

您可以有一个布局组件

const Layout = (props) => {
    return (
        <>
            <header />
            { props.children }
            <footer />
        <>
    );
}

其中<>是片段，页眉和页脚可以是组件，也可以是任何组件。以后您可以像使用abovce一样使用它

<Layout>
    <div>Content goes here</div>
</Layout>

Answer 2

为什么不将它们放在每个组件的父级App中？

const App = () => {
  return (
    <div className="App">
      <Header />
      <EntryPointComponentToPages />
      <Footer />
    </div>
  );
}

或者，如果它们只是不变的HTML标记，则可以将它们放在index.js中，使其围绕呈现React的div：

<body>
  <div>Header HTML here!</div>
  <div id="root"></div>
  <div>Footer HTML here!</div>
</body>

我的决策依据是：这看起来像React / JavaScript需要处理还是应该处理？我打算经常更改此代码吗？

Answer 3

可以通过不同的实现方式在整个项目组件中共享页眉/页脚：

1-将“页眉和页脚组件”导入要使用的位置：

const HomePage = (props) => {
    return (
        <>
            <Header />
            /** Content **/
            <Footer />
        <>
    );
}

2-使用高阶组件（HOC）：

通过在布局HOC中导入一次页眉和页脚

Layout.js

import Header from "./Header";
import Footer from "./Footer";

const withLayout = Page => {
  return () => (
    <div>
      <Header />
      <Page />
      <Footer />
    </div>
  );
};

export default withLayout;

HomePage.js

import withLayout from "./Layout"
const HomePage = (props) => {
    return (
        <div>
            /** Content **/
        </div>
    );
}
export default withLayout(HomePage);

请注意，Layout.js不是react组件，它是用于将组件嵌入到页眉和页脚组件中的React组件的包装函数。

使用react创建'global'页眉和页脚

3 个答案: