动态计算反应组件的高度

Question

我正在使用 react-redux 构建一个像 instagram 这样的社交网络应用程序，其中我使用 react-infinite 来显示帖子。目前我在哪里对元素高度进行硬编码，如果屏幕尺寸不变，它会很好地工作，但我希望应用程序具有响应性，即它也应该在移动视图中工作。如何动态计算元素的高度并将其设置为无限反应？目前，我的返回方法看起来像

    return (
    <div>
      <Infinite elementHeight={1000}
        useWindowAsScrollContainer
        infiniteLoadBeginEdgeOffset={200}
        onInfiniteLoad={this.handleInfiniteLoad}
        loadingSpinnerDelegate={this.elementInfiniteLoad()}
        isInfiniteLoading={this.props.isInfiniteLoading}
      >

        {posts}
      </Infinite>
    </div>
);

其中可变帖子包含 Post 组件的实例，如 <Post key="1"/>,<Post key="2" /> 等，具体取决于帖子的数量。如何计算帖子高度并将其提供给无限反应？

Answer 1

您可以使用 CSS 模块系统来应用样式您的组件。

例如，

//app.js

import style from 'app.css';

Class App extends from Component{
       constructor(props){
            super(props);
        }

        render(){
             return <div className={style. container}>
                    <div class name={style.content}>Content</div>
                  </div>
        }
 }

 //app.CSS

 .container{
       height: 500px;
       width: 1000px;
  }

  .content{
        height: 100%;
        width: 100%;
   }

   @media only screen and 
   (max-width: 500px) { 
       .container {
             height: 300px;
             width: 400px;
        }
   }

希望对您有所帮助。

Answer 2

我以前用过一个 react-height 包来解决这个问题， (https://github.com/nkbt/react-height) 如果组件或其直接子级发生更改，它将动态地为您提供组件的高度。