如何在 ReactJS 中创建粘性页脚？

在 ReactJS 中创建粘性页脚可能看起来有些困难，但实际上它并不是那么复杂。本文将介绍如何使用 ReactJS 创建粘性页脚。

步骤 1：创建 ReactJS 应用程序

要创建 ReactJS 应用程序，请运行以下命令：

npx create-react-app my-app
cd my-app
npm start

在执行完这些命令后，打开浏览器并访问 http://localhost:3000/，即可看到 ReactJS 应用程序的启动页面。

步骤 2：创建页脚组件

接下来，我们需要创建页脚组件。这个组件将包括粘性 CSS 样式和我们想要显示的内容。以下是一个简单的页脚组件示例：

import React from 'react';
import './Footer.css';

function Footer() {
  return (
    <div className="footer">
      <p>Copyright © 2021
    </div>
  );
}

export default Footer;

上面的代码中，我们使用 div 标签创建页脚，同时为其添加了 footer 类名。在 CSS 中，我们将 footer 类设置为 position: fixed，这样它就能够始终保持在屏幕的底部。以下是 Footer.css 文件的示例代码：

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
  color: #000;
  text-align: center;
  padding: 20px;
}

将 Footer 组件导入到应用程序中的主文件中，然后使用该组件即可。在 App.js 中添加以下内容：

import Footer from './components/Footer'

function App() {
  return (
    <div className="App">
      ...
      <Footer />
    </div>
  );
}

现在，当您运行此应用程序时，您将看到页脚始终保持在底部，就像一个粘性页脚一样。

结论

这就是如何在 ReactJS 中创建粘性页脚的方法。您可以使用 position: fixed CSS 属性和一个适当的 HTML 结构来实现这一点。此外，如果您想要更多的功能，您可以随时扩展该组件。