Reactjs 动态计算反应构件的高度

我正在使用react redux构建一个类似instagram的社交网络应用程序，其中我使用react infinite来显示帖子。目前，我正在硬编码元素高度，如果屏幕大小不变，它可以正常工作，但我希望应用程序能够响应，即它也可以在移动视图中工作。如何动态计算元素的高度并将其设置为react infinite？目前，我的返回方法如下所示

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

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

返回(
{posts}
);

---

其中，变量posts包含Post组件的实例，如

、

等等，具体取决于Post的数量。如何计算帖子高度并将其输入到infinite react？

您可以使用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;
        }
   }

//app.js
从“app.css”导入样式；
类应用程序从组件扩展而来{
建造师（道具）{
超级（道具）；
}
render（）{
返回
内容
}
}
//app.CSS
.集装箱{
高度：500px；
宽度：1000px；
}
.内容{
身高：100%；
宽度：100%；
}
@仅媒体屏幕和
（最大宽度：500px）{
.集装箱{
高度：300px；
宽度：400px；
}
}

---

我希望这对你有帮助

我以前用过一个react height包来解决这个问题，

---

()如果组件或其直接子组件发生变化，它将动态地为您提供组件的高度。

@Vasi查看react infinite，然后评论它不是正确答案问题是关于动态获取react组件的高度@Ben它是否类似于react measure。我曾尝试使用react measure，但它不起作用不知道，我没用过那个。