【发布时间】：2018-03-18 09:32:14
【问题描述】：
我正在尝试创建具有动态行高的 List 原型。我正在尝试使用 CellMeasurer 来测量 rowHeights。我正在从服务器获取列表项的 html。它与 facebook 新闻提要中的某个项目有些相关。我需要动态确定我放置在下面提到的 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是否可以计算通过dangerousSetInnerHtml设置的行的高度？ DangerouslySetInnerHtml 可以包含不同高度的图像/文本链接。
2.如果我确实给出了静态行高，我会看到很多空白空间，其中行大小实际上小于指定的 rowHeight。如何避免这种情况？
更新：
我将静态 html 代码更改为组件，然后尝试使用单元格测量器。高度被视为前 75 个组件的默认高度 30 像素，并且 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;
在图片中你可以看到从第 76 到 77div 的高度从 30px 到 481px 的变化？无法理解这个问题
【问题讨论】：
-
列表元素维度未知时如何动态调整行大小？