在 styled-components 中传递 window.onload 的函数

Question

我目前正在制作一个没有完整高度的侧边栏。我正在尝试将标题的高度减去窗口屏幕的高度。

const setSidebarHeight = () => {
    return (window.onload = () => {
        if (document.getElementById('navigation-bar')) {
            return ( window.innerHeight - document.getElementById('navigation-bar').clientHeight );
        }
    });
}

const SideBarDiv = styled.div`
    color: #232323;
    background-color: #f4f3f4;
    float: left;
    position: relative;
    z-index: 100;
    height: ${setSidebarHeight()}px;
`;

我有一个关于将 window.onload 传递给 css 的问题 height 的属性当前代码在 devtools 中没有显示任何 px。

请帮我解决这个问题。谢谢！

Answer 1

在CSS#calc的帮助下，您可以进行动态高度计算。

使用view port高度

height : calc(100vh-20px) //20px height of header

Answer 2

我不太明白你的问题，但我有更好的方法来做到这一点

const setSidebarHeight = () => {
 return (window.onload = () => {
  if (document.getElementById('navigation-bar')) {
   return ( window.innerHeight - document.getElementById('navigation-bar').clientHeight );
  }
 });
};

render() {
  <SideBarDiv height={this.setSidebarHeight()} />
}

const SideBarDiv = styled.div`
 // ....
 height: ${props => props.height}px;
`;

Answer 3

虽然 RIYAJ KHAN 的回答引出了最好的方法，但我会回答你原来的问题。

您只需在 onLoad 方法中设置一个变量并在您的组件字符串中引用它。

var panelHeight = 0;
window.onload = () => {
        if (document.getElementById('navigation-bar')) {
             panelHeight = window.innerHeight - document.getElementById('navigation-bar').clientHeight ;
        }
}

那么……

const SideBarDiv = styled.div`
    color: #232323;
    background-color: #f4f3f4;
    float: left;
    position: relative;
    z-index: 100;
    height: ${panelHeight}px;
`;