Reactjs 如何在react中制作粘性页脚

发布于11月13日

我制作了一个粘性页脚的高级组件，它将其他组件封装在自己的内部:

Footer.js

//this is a higher-order component that wraps other components placing them in footer

var style = {
    backgroundColor: "#F8F8F8",
    borderTop: "1px solid #E7E7E7",
    textAlign: "center",
    padding: "20px",
    position: "fixed",
    left: "0",
    bottom: "0",
    height: "60px",
    width: "100%",
};

const Footer = React.createClass({
    render: function() {
        return (
            <div style={style}>
                {this.props.children}
            </div>
        );
    }
});

export default Footer;

Usage:

<Footer><Button>test</Button></Footer>

但它隐藏了页面的内容:

这看起来像是一个常见的问题，所以我搜索了一下，找到了this issue，其中FlexBox推荐用于粘性页脚.但在this demo页，页脚位于页面的最底部，虽然我需要页脚始终显示在页面上，并且在上面的区域内滚动内容(如SO chat)中).除此之外，还有一个建议是使用自定义样式表规则更改所有其他组件.是否可以仅使用页脚组件的样式来实现我需要的功能，以便代码保持模块化？

var style = { backgroundColor: "#F8F8F8", borderTop: "1px solid #E7E7E7", textAlign: "center", padding: "20px", position: "fixed", left: "0", bottom: "0", height: "60px", width: "100%", } var phantom = { display: 'block', padding: '20px', height: '60px', width: '100%', } function Footer({ children }) { return ( <div> <div style={phantom} /> <div style={style}> { children } </div> </div> ) } export default Footer

Reactjs 如何在react中制作粘性页脚

推荐答案

Reactjs相关问答推荐

在一个地方调用函数会影响其他地方调用该函数

如何使用Reducer更新全局变量

防止在Reaction中卸载

React：关于useEffect钩子如何工作的困惑

Mantine DatePickerInput呈现错误

Reaction上下文值无法传递给其他组件

无法在下一个标头上使用 React hooks

React - 函数组件 - 点击两次问题处理

如何渲染子路径并触发react 路由父加载器？

如何读取 null 的属性？

Formik onChange() 字段挂钩覆盖显示值和 Select 机制

将props 传递给 NextJS 布局组件

如何在 React map 函数循环中使用
标签

顶点图表甜甜圈项目边框半径

RTK 查询Mutations 在 StrictMode 中执行两次

使用输入类型文本对 useState 和日期做出react

未捕获的错误：操作必须是使用 redux/toolkit 的普通对象

如果 URL 已随功能组件更改，则取消刷新

React Hooks 表单在日志(log)中显示未定义的用户名

为什么 state redux-toolkit 是代理？