javascript - ReactJS 中的 JQuery 函数用于动态视口(viewport)高度

Question

所以我在另一个关于使表格高度等于视口(viewport)高度的问题上得到了一些帮助。这意味着，如果用户调整屏幕大小，表格高度会即时调整以占据屏幕的整个高度。我现在的问题是，这是一个 React 应用程序，我很难将这个 jquery 函数转换为 React。

我的函数如下所示:

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

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

这是一个codepen显示行为

这是我正在尝试做的事情的屏幕截图

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

提前致谢

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

Answer 1

在组件生命周期中，您应该添加一个 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>
        )
    }
}

所以它的作用是，当您的组件初始化时，您将状态设置为视口(viewport)的宽度和高度(使用 jQuery)。然后你定义一个方法来更新状态，当你的组件挂载时，你将一个调整大小事件监听器附加到它，并在每次屏幕调整大小时调用调整大小方法。这确保您的状态始终包含视口(viewport)的宽度和高度。然后您可以通过将该状态作为 props 和 boom 传递给您的组件来定义组件的宽度和高度!很好，每次调整屏幕大小时，您的组件都会匹配它。

如果您有任何问题，请告诉我。你可能需要修改它才能让它工作(特别是生命周期事件可能不会像你需要的那样经常更新状态)我只是把它掀起来并没有测试它但理论上这正是你需要的

编辑:只是一个想法，如果你想改变你的组件的样式，我会使用样式对象。所以在子组件中，做这样的事情:

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

当你渲染那个组件时

<ChildComponent style={style} />