html - 使用反应创建“全局”页眉和页脚

Question

我不确定我是否可以通过对我的想法做出反应来完成。我阅读了多个介绍以做出反应，并认为它应该有效。但是，我希望熟悉 react 的人能给我一些保证。

我想要的： 全局页眉和页脚，因为它们在我拥有的任何页面上都不会改变。我可以用 php 解决它......但是我想从 react 开始，觉得用这种方式解决它是合适的。我的意思的一个例子：HTML中的全局页眉和页脚（这基本上是我需要的反应功能）

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

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

我觉得反应中的一个组件可能是页脚/页眉。尝试做出反应是否可行或合理？谢谢！（我不一定希望提供代码示例，而是希望获得普遍的意见）

标签： htmlreactjs

Answer 1

你可以有一个布局组件

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

其中 <> 是一个片段，页眉和页脚可以是组件或其他任何东西。稍后您可以像上面的示例一样使用它

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