javascript - 有条件地渲染到 div 高度

Question

在反应中，我仅在其高度不大于外部 div 高度的给定百分比时才尝试渲染内部 div。

我想出了以下解决方案：

Wrapper.js

import React from "react";
import Presentation from "./Presentation"

export default class Wrapper extends React.Component{
    constructor(props) {
        super(props);
        this.state = { percentage: 0 };

        this.myRef = React.createRef();
    }

    componentDidMount(){
        this.setState(
            {percentage: this.myRef.current.inner.clientHeight/this.myRef.current.outer.clientHeight * 100}
        )
    }

    componentDidUpdate(prevProps, prevState){
        const percentage = this.myRef.current.inner.clientHeight/this.myRef.current.outer.clientHeight * 100;

        if (prevState.percentage !== this.state.percentage){

            this.setState(
                {percentage: percentage}
            )
        }

    }

    render(){
        return <Presentation ref={this.myRef} percentage={this.state.percentage}>abc</Presentation>
    }
}

Presentation.js

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const Presentation = (props, ref) => {
    const innerRef = useRef();
    const outerRef = useRef();

    const inputRef = useRef();
    useImperativeHandle(ref, () => ({
        get inner(){
            return innerRef.current
        },
        get outer(){
            return outerRef.current
        }
    }));
    console.log("percentage presentation: ", props.percentage)
    return <div><div ref={outerRef}>Outer<div ref={innerRef}>
        <div>Anteil inner: {props.percentage}</div>
        {props.percentage <= 50 && <div>50 größer</div>}

        </div></div></div>
}


export default forwardRef(Presentation);

不幸的是，它会导致错误；错误：超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。

调试后我发现出了什么问题（在渲染过程中有一个无限循环），但我不知道如何自己解决它。任何人都可以给我一个更好的解决方案的提示吗？

标签： javascriptreactjs