Javascript ReactJS中用于动态视口高度的JQuery函数

所以我在另一个问题上得到了一些帮助，关于使桌子的高度等于视口的高度。也就是说，如果用户调整屏幕的大小，表格高度会动态调整以占据屏幕的整个高度。我现在的问题是，这是一个React应用程序，我很难将这个jquery函数转换为React

我的函数如下所示：

$(document).ready(function() {
   function setHeight() {
     windowHeight = $(window).innerHeight();
     $('.dynamicHeight').css('height', windowHeight + 'px');
   };
   setHeight();

   $(window).resize(function() {
     setHeight();
   });
});

let style = {
    width: this.props.width + 'px',
    height: this.props.height + 'px'
}

下面是一个显示该行为的示例

这是我试图做的一个屏幕截图

如何在React中构建此函数？我想它需要一些修改

提前谢谢

---

注意：这可能看起来像我提出的另一个问题，但它不是重复的。这是一个与同一问题相关的完全不同的问题

在组件生命周期中，您应该添加一个componentDidMount方法。在该方法中，只需添加一个调整大小处理程序

import React, { Component } from 'react';

class MyComponent extends Component {
    constructor(props){
        super(props);
        this.state = {
            width: $(window).width(),
            height: $(window).height(),
        }
        this.resize = this.resize.bind(this);
    }
    resize(){
        this.setState(() => {
            return {
                width: $(window).width(),
                height: $(window).height()
            }
        });
    }
    componentDidMount(){
        window.addEventListener('resize', this.resize);
    }
    render(){
        return (
            <div>
                <MyComponent width={this.state.width} height={this.state.height} />
            </div>
        )
    }
}

当渲染该组件时

<ChildComponent style={style} />

这个答案对我来说很有意义。你说得对，我确实需要修改一下。我得到了一些错误，没有任何迹象表明到底是什么失败了。lolI不会复制和粘贴上面的代码，我肯定会有一些问题，但这是您想要做的总体要点。只需将其用作模板并重新构建以满足您的需要。如果你需要更多的帮助，我很高兴阿西斯蒂特不允许我在常量中添加构造函数。如果我将其设为类，则该错误会消失并接受构造函数，但它不识别美元符号运算符而不是$（窗口）。width（）尝试使用document.documentElement.clientWidth和document.documentElement.ClientHight。这应该是可行的，您不需要jQuery。如果这不起作用，请尝试window.innerHeight/window.innerWidthWell，well，well，Linter不喜欢$operator，但我的控制台没有错误，代码正常工作。不得不在css文件中做一些其他的调整，但我认为这是可行的。谢谢你，伙计。这帮了大忙！