動態計算反應組分的高度

我正在使用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 key="1"/>,<Post key="2" />等郵政組件的實例。我如何計算杆身高度並將其送入無限的反應？

來源

2017-06-21 coder

-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; 
     } 
    }

我希望它有助於您。

來源

2017-06-21 03:17:22 Vasi

@ Vasi看看反應無限，然後評論它不是正確的答案問題是獲得反應組件的高度動態 – coder

我之前有一個用於這個問題的react-height軟件包，它會動態地給你組件的高度，如果它或它的直接子組件變化的話。

來源

2017-06-21 03:54:25

@本是它類似於react-measure https://github.com/ souporserious /反應措施。我曾嘗試過的反應措施，但它沒有工作 – coder

我不知道我沒有使用過那一個。 –

動態計算反應組分的高度

回答

相關問題