Передайте функцию window.onload внутри styled-компоненты

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 текущегоКод не показывает px внутри devtools.

, пожалуйста, помогите мне в этом.спасибо!

Answer 1

Я не совсем понимаю ваш вопрос, но у меня есть лучший способ сделать это

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 2

Хотя ответ 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;
`;

Answer 3

с помощью CSS#calc вы можете выполнять динамическое вычисление высоты.

использовать view port высота

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