cellmeasurerはdangerouslySetInnerHtmlによってdivres rendererdのために働くでしょう

Question

私は動的行の高さを持つリストのプロトタイプを作成しようとしています。私はrowHeightsを測定するためにCellMeasurerを使用しようとしています。私は、サーバーからリスト項目のhtmlを取得しています。これは、Facebookのニュースフィードの項目に多少関連しています。私は、以下に述べるrowRendererに配置した次の要素の高さを動的に決定する必要があります。 cellRendererはdangerouslySetInnerHtmlを通じて設定行の高さを計算することが可能1.Is

import React, { Component } from 'react'; 
    import ReactDOM from 'react-dom'; 
    import { List } from 'react-virtualized'; 
    import './FeedListView.css' 
    import link from 'react'; 
    import { CellMeasurer, CellMeasurerCache, Grid } from 'react-virtualized'; 
    // List data as an array of strings 
    class FeedListViewDynamicHeight extends Component { 


     render() { 
     const cache = new CellMeasurerCache({ 
      defaultWidth: 825, 
      minWidth: 825, 
      fixedHeight: true 
     }); 


     function rowRenderer ({ 
      key,   // Unique key within array of rows 
      index,  // Index of row within collection 
      parent, // This row is visible within the List (eg it is not an overscanned row) 
      style  // Style object to be applied to row (to position it) 
     }) { 
      return (

       <CellMeasurer 
        cache={cache} 
        columnIndex={0} 
        key={key} 
        rowIndex={index} 
        parent={parent} 
        style={style} 
        > 


      <div style={style} key={key}> 
      <div className={key} style={style} key={key} > 
      <div dangerouslySetInnerHTML={{ __html: html2jsx }}></div> 
       </div> 

        </div> 




     </CellMeasurer> 
    ); 

     } 
     return (

      <div> 

      <List 
      width={825} 
      height={200} 
      rowCount={1} 
      rowHeight={cache.rowHeight} 
      rowRenderer={rowRenderer} 
      /> 
      </div> 


     ); 
     } 
    } 

：

<div style={style} key={key}> 
    <div className={key} style={style} key={key} > 
    <div dangerouslySetInnerHTML={{ __html: html2jsx }}></div> 
    </div> 

全体成分を以下にコピーされましたか？ DangerouslySetInnerHtmlにはさまざまな高さの画像/テキストリンクを含めることができます。

2.静的な行の高さを指定すると、実際に行のサイズが指定されたrowHeightよりも小さい空き領域が多く表示されます。そのようなケースを避けるには？

更新：

I成分に静的なHTMLコードを変更した後、細胞計測を試みました。最初の75個のコンポーネントの高さはデフォルトの高さ30pxになり、CellMeasurerは高さパラメータを超えたときにのみ機能します。絵で

下のスクリーンショットを添付のスクリーンショットとコード

import React, { Component } from 'react'; 
    import ReactDOM from 'react-dom'; 
    import { List } from 'react-virtualized'; 
    import Post from './Post' 

    import link from 'react'; 
    import styles from './main-header.css' 
    import { CellMeasurer, CellMeasurerCache, Grid } from 'react-virtualized'; 



    import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser'; 
    // List data as an array of strings 
    class FeedListViewDynamicHeight extends Component { 

    _cache = new CellMeasurerCache({ 
     fixedWidth: true, 
     }); 

    _rowRenderer = ({ index, isScrolling, key, parent, style }) => { 



     var post={ 
     groupName:"Product Management- Discussions", 
     postImageUrl:"https://media.licdn.com/mpr/mprx/0__DD-Wo-4z4cB8Q7d6jip7IyZB4eBiF_dFaPx7wanMDdqX6Ab5juODD0WydT", 
     name:"Karan Thakral", 
     role:"Worked at Cisco Systems", 
     lastupdated:"2 mins ago", 
     text:"Slack introduces shared channels to facilitate inter company chat, interesting developmenb Slack introduces shared channels to facilitate inter company chat, interesting developmen Slack introduces shared channels to facilitate inter company chat, interesting developmen Slack introduces shared channels to facilitate inter company chat, interesting developmen Slack introduces shared channels to facilitate inter company chat, interesting development", 
     like:"0", 
     comment:"1", 
     share:"2" 
     } 

     let content; 
      content= <Post post={post}/> 


     return (
     <CellMeasurer 
      cache={this._cache} 
      columnIndex={0} 
      key={key} 
      parent={parent} 
      rowIndex={index} 

     > 

      // 'style' attribute required to position cell (within parent List) 
      <div key={key} className={key} style={style}> 
      {content} 
      </div> 


     </CellMeasurer> 
    ); 
    }; 
    render() { 







     return (

     <div> 

     <List 
     width={825} 
     height={2000} 
     rowCount={100000} 
     rowHeight={this._cache.rowHeight} 
     rowRenderer={this._rowRenderer} 
     /> 
     </div> 


    ); 
    } 
    } 

    export default FeedListViewDynamicHeight; 

を取り付けます77divに第76から30pxから481pxに高さの変化を見ることができますか？ cellRendererはdangerouslySetInnerHtmlを通じて設定の行の高さを計算するために、この問題

Answer 1

を理解することができません。それは可能1.Is？ DangerouslySetInnerHtmlにはさまざまな高さの画像/テキストリンクを含めることができます。

確かに、非同期のコンテンツ（画像など）の読み込みが完了したら、実際にセルを測定するにはCellMeasurerを知らせる必要があります。

function rowRenderer ({ index, isScrolling, key, parent, style }) { 
    const source // This comes from your list data 

    return (
    <CellMeasurer 
     cache={cache} 
     columnIndex={0} 
     key={key} 
     parent={parent} 
     rowIndex={index} 
    > 
     {({ measure }) => (
     // 'style' attribute required to position cell (within parent List) 
     <div style={style}> 
      <img 
      onLoad={measure} 
      src={source} 
      /> 
     </div> 
    )} 
    </CellMeasurer> 
); 
} 

あなたは直接HTMLを設定しているという事実を処理するために例を適応する必要があります：CellMeasurer docsはrenderメソッドを反応させ、通常でこれの例を示しました。

2.静的な行の高さを指定すると、実際に行のサイズが指定されたrowHeightよりも小さい空き領域が多く表示されます。そのようなケースを避けるには？

これはしないでください...しないでください。静的な高さを与えていて行が短い場合は、もちろん空のスペースが表示されます。あなたは正確な高さを与える必要があります。このため、CellMeasurerが存在します。 :)

これは偉大な基準成分である：https://github.com/bvaughn/tweets/blob/master/src/components/TweetList.js

またパワーデモ私が作成した偽物・Twitterのアプリ：https://tweets.now.sh/

私は、同様のニュースフィードのようなリストの例のソースコードをチェックアウトすることをお勧め。