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

我之前有一个反应高度包用于此问题，（https://github.com/nkbt/react-height）如果组件或其直接子项发生变化，它将动态地给出组件的高度。

动态计算反应分量的高度

2 个答案: