Получить высоту div родительского компонента от вложенного дочернего компонента до рендеринга дочернего компонента - PullRequest
Новая
       11

Получить высоту div родительского компонента от вложенного дочернего компонента до рендеринга дочернего компонента

0 голосов
/ 28 июня 2019

Я хочу отображать дочерние экраны небольшого фиксированного размера в зависимости от высоты экрана, отображаемой пользователями.у меня есть родительский компонент, который содержит все дочерние экраны и один другой компонент, поэтому я хочу получить доступ к родительской высоте в дочернем состоянии componentWillMount и рассчитать, сколько дочерних экранов я могу отобразить, вычитая из высоты родителя его другого дочернего элемента.в соответствии с этим я буду отображать дочерние экраны.

Моя структура похожа на ниже

Основной родительский компонент 

import React, { Component } from 'react'
import { Container, Row, Col } from 'react-bootstrap'
import Styled from 'styled-components'
import Content from './Content'

const Styles=Styled.div`
    .parent-row{
        min-height:calc(100vh - 80px);
    }
`;

class Home extends Component {

    render() {
        return (
            <Styles>
                <Container className='parent-container'>
                    <Row className='parent-row'>
                        <Col md={2} className='navigation'>

                        </Col>
                        <Col md={10} className='main-content'>
                            <Content/>
                        </Col>
                    </Row>
                </Container>
            </Styles>
        )
    }
}
export default Home

Высота класса main-content будет таким же, как установлено в parent-row .

Content Component 

import React, { Component } from 'react'
import { Container } from 'react-bootstrap'
import BreadCrumb from './BreadCrumb '
import ChildScreens from './ChildScreens'

class Content extends Component {

    render() {
        return (
            <Styles>
                <Container>
                    <BreadCrumb />
                    <ChildScreens />
                </Container>
            </Styles>
        )
    }
}
export default Content

ChildScreens Component

import React, { Component } from 'react'
import Styled from 'styled-components'

const Styles=Styled.div`
    height:150px;
`;

class ChildScreens extends Component {
    constructor(props) {
        super(props)

        this.state = {
             count:''
        }
    }
    componentWillMount() {
        let height = document.getElementsByClassName('main-content').clientHeight;
        // let count = (height-BreadcrumbHeight)/150
        this.setState({count});
        // How to get main-content height here it self and substract it from ither child component?
    }
    screens=()=>{
        let children=[];
        for(let i=0;i<this.state.count;i++){
            children.push(
                <Styles key={i}>
                    <p>Hello There</p>
                </Styles>
            )
        }
        return children;
    }
    render() {
        return (
            <>
                {this.screens()}
            </>
        )
    }
}
export default ChildScreens
...