Question

我正在尝试创建具有动态行高的List原型。我正在尝试使用CellMeasurer来测量rowHeights。我从服务器获取列表项的html。它与facebook新闻Feed中的某个项目有些相关。我需要动态确定我在下面提到的rowRenderer中放置的以下元素的高度。

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

整个组件已复制到下面：

    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>


        );
      }
    }

1. cellRenderer可以计算通过dangerouslySetInnerHtml设置的行的高度吗？ DangerouslySetInnerHtml可以包含不同高度的图像/文本链接。

2.如果我给出一个静态行高，我会看到很多空的空间，其行大小实际上小于指定的rowHeight。如何避免这种情况？

更新

我将静态html代码更改为组件，然后尝试了单元格测量器。对于前75个组件，高度被视为30px的默认高度，而CellMeasurer仅在超过height参数时才起作用。附加屏幕截图和代码

  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;

附上下面的截图

在图片中你可以看到从第76到77d的高度从30px变为481px？无法理解这个问题

Answer 1

1. cellRenderer可以计算通过dangerouslySetInnerHtml设置的行的高度吗？ DangerouslySetInnerHtml可以包含不同高度的图像/文本链接。

当然，但是一旦异步内容（如图像）加载完毕，您就需要让CellMeasurer知道实际测量单元格。 CellMeasurer docs使用正常的React渲染方法显示了这个示例：

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的事实。

2.如果我给出一个静态行高，我会看到很多空的空间，其行大小实际上小于指定的rowHeight。如何避免这种情况？

不要听起来很苛刻，但是......不要这样做吗？如果您提供静态高度且行数较短，那么您当然会看到空白区域。你需要给出一个准确的高度。这就是CellMeasurer存在的原因。：）

这是一个很棒的参考组件：https://github.com/bvaughn/tweets/blob/master/src/components/TweetList.js

它支持我创建的假冒Twitter-app：https://tweets.now.sh/

我建议查看类似新闻源列表的示例的源代码。

cellmeasurer将通过dangerouslySetInnerHtml为divs rendererd工作

1 个答案: