Question

我想根据用户显示的屏幕高度渲染固定大小的子屏幕。我有一个包含所有子屏幕和一个其他组件的父组件，因此我想访问子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

类主要内容的高度将与在父行中设置的高度相同。

内容组件

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组件

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

在子组件渲染之前，从嵌套的子组件获取父组件的div的高度

0 个答案: