标签: react-virtualized

我有一个<List />组件，我想在其中padding-top向wrapper添加首字母。由于所有元素都已absolute定位，我找到了这个解决方案，但我想知道它是否正确或者是否有另一种更便宜的解决方案：

const rowRenderer = ({ index, key, style, isScrolling }) => {
// ...

return (
  <ul key={key}
    style={{
      ...style,
      top: style.top + 50,
    }}>
    { items.map(itemRenderer) }
  </ul>
)

}

相关的部分是style道具。

我有一个react组件,它以网格模式显示一个项目的一维列表.每个项目具有相同的宽度和高度,它们位于三列内.可能有很多这些,所以我决定使用Masonry组件给反应虚拟化一个旋转,这似乎是为这个用例编写的.它运作良好,但有一点需要注意:如果物品改变了它们的高度,我不能让砌体注意到.

这是一个简化的例子:

constructor(props) {
    [...]
    this.cellMeasurerCache = new CellMeasurerCache({
        defaultHeight: this.state.height,
        fixedWidth: true,
    });

    this.cellPositioner = createMasonryCellPositioner({
        cellMeasurerCache: this.cellMeasurerCache,
        columnCount: 3,
        columnWidth: 250,
        spacer: 20,
    });
}

[...]

cellRenderer({ index, key, parent, style }) {
    return (
        <CellMeasurer
            cache={this.cellMeasurerCache}
            index={index}
            key={key}
            parent={parent}
        >
            <div style={style}>
                [...]
            </div>
        </CellMeasurer>
    );
}

resetMasonry() {
    this.cellMeasurerCache.clearAll();

    this.cellPositioner.reset({
        cache: this.cellMeasurerCache,
        columnCount: 3,
        columnWidth: 250,
        spacer: 20,
    });

    this.masonryRef.recomputeCellPositions();
}

render() {
    return (
        <AutoSizer>
            {({ height, width }) =>
                <Masonry
                    cellCount={this.state.list.length}
                    cellMeasurerCache={this.cellMeasurerCache}
                    cellPositioner={this.cellPositioner}
                    cellRenderer={this.cellRenderer} …

I'm using react-virtualized's table and defined 4 columns for that table. For some reason it only displays the 1st column. I can not get the other columns to display. Not sure what I'm doing wrong. Below is a snippet of the code:

const BTable = ({bdata}) => { 
return(
    <AutoSizer disableHeight>
        {({ width }) => (
            <Table
                headerHeight={20}
                height={300}
                width={width}
                overscanRowCount={5}
                rowHeight={20}
                rowGetter={({index}) => (bdata[index])}
                rowCount={bdata.length}
                noRowsRenderer={() => (<div></div>)}>
                <Column
                    label='Id'
                    cellDataGetter={
                      ({ columnData, dataKey, rowData }) => (rowData[dataKey])
                    } …

我正在做一个React/Redux项目,需要实现虚拟化/无限加载列表. react-virtualized似乎打算完成这项工作,但即使阅读了所有可用的文档并阅读了大量的StackOverflow帖子,我也无法使其工作或找到组件实际工作机制的清晰解释.

我看过的主要例子是:

https://github.com/bvaughn/react-virtualized/blob/master/docs/creatingAnInfiniteLoadingList.md

https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md#examples

我遇到的主要问题是:

1. 目前还不清楚如何loadMoreRows()在初始加载/渲染情况下触发加载器进行调用.典型的情况是我们设计组件,通过loadMoreRows()在最初呈现时调用数据来初始化自身.实现这一目标所需的配置值并不明显.

2. 目前尚不清楚该rowCount属性是否旨在表示已加载行的当前状态(块/页数据中的行数),还是整个行数据的总计数.并且,在任何一种情况下,在进行初始AJAX加载调用之前都无法知道这些,那么设置初始值的意图是rowCount什么？

我已经尝试将各种示例中的代码放入我的项目中,但我从未看到过loadMoreRows正在进行的调用.我认为需要的是一个充实的例子,它演示了一个非常典型的用例:a)最初渲染一个空List,然后触发一个初始数据加载调用; b)更新rowCount财产,何时/何地执行此操作; c)管理表示当前数据块/页面的当前加载的数据集.

任何指针都将非常感激.

我正在使用react-virtualized来获取一长串（1000 多个）项目列表以供选择。我正在尝试设置一个端到端测试，需要单击当前未渲染的元素之一。

通常，我会简单地使用类似的东西：

await t.click(
    ReactSelector('ListPage')
        .findReact('ListItem')
        .nth(873) // or .withText(...) or .withProps(...)
)

但由于只渲染了 s 的一小部分ListItem，TestCafe 无法找到所需的元素。

我一直在试图弄清楚如何使用 TestCafe 的ClientFunction滚动列表容器，以便ListItem呈现所需的内容。

但是，我遇到了一些问题：

• 有没有办法共享Selector并ClientFunction修改DOM元素的scrollTop？或者我是否必须直接通过 DOM 重新查询元素？
• 由于ListItems 的高度不同，滚动位置不是索引x项目高度的简单计算。如何在此函数中不断更新/滚动，直到所需的内容Selector可见？

我有一个有效的虚拟滚动网格，用于按页面上的部分显示文档。我现在为搜索结果添加了另一个 RV，但由于某种原因，当我向下滚动时，内容会滚动到视图之外！！我试图将其简化为仅使用具有预定高度的 List 并消除潜在因素，但它仍然给了我这个奇怪的错误。代码本身按预期工作，它是起作用的列表。（我实际上是在使用 Cell Measurer 来获取行高，但即使使用以下版本，它也会起作用）。这是代码：

const rowRenderer = ({ index, isScrolling, style, key  }) => 
  this.resultRowRenderer(index, key, style, curList)

resultRowRenderer(index, key, style, list) {
  ...
  return <Markup content={quote} onClick={() => jumpToLocCallback(location)} />       
}

render() {
  ...
  const renderList = (curList, i) => {
    const rowCount = curList.results.length

    return (
      <List
        key={i}
        height={100}
        rowHeight={30}
        rowCount={rowCount}
        rowRenderer={rowRenderer}
        overscanRowCount={0}
        width={700}
        ref={(ref) => this.List = ref}
      />
    )
  }

  const renderLists = searchResultsLists.map(renderList)

  return (
    <div className='results-sidebar'>
      {renderLists}
    </div> 
  )
}

谢谢

想象一下窗口宽度为 1000 像素。四个文本列 100px 宽度。我想让列增长到 250px 以填充全宽。

我正在使用 AutoSizer 和 MultiGrid。

我正在使用react-virtualized Table在InfiniteLoader组件中显示。我有多个Column条目，其中2个是固定宽度，一个是可变的。我如何获得可变宽度的包裹而不是切断？代码：

    <InfiniteLoader
      isRowLoaded={this.isRowLoaded}
      loadMoreRows={this.loadMoreRows}
      rowCount={99999999}
    >
      {({ onRowsRendered, registerChild }) => (
        <Table
          width={this.state.width || 800}
          height={1200}
          rowCount={this.state.len}
          rowHeight={this.lineSize}
          rowGetter={this.renderItem}
        >
          <Column label='Index' dataKey='index' width={indexWidth} className='metadata'/>
          <Column label='Date' dataKey='date' width={dateWidth} className='metadata' />
          <Column label='Text' dataKey='text' width={400} flexGrow={1}/>
        </Table>
      )}
    </InfiniteLoader>

我的配置如下：

// Calling it
<div style={{ width: 1000, height: 800 }}>
  <MyComponent />
</div>

// MyComponent.js
<InfiniteLoader { ...itsProps }>
  {({ onRowsRendered }) => (

    <AutoSizer>
      {({ width, height }) => (

      <Table
        width={ width }
        width={ height }
        ...

问题是这就是正在呈现的内容：

<div style="overflow: visible; height: 0px; width: 0px;">
  <div class="ReactVirtualized__Table" role="grid">
    ...

所以屏幕上什么也看不到。

也许我误解了Autosizer用法，所以我将它设置为根据父级的宽度/高度进行调整。

我错过了什么？

我有以下反应列表。

<select
    id="sponsor" 
    name="sponsor"
    className="form-control"
    placeholder="Sponsor"
    }
    >
    <option value="" selected>Please select the sponsor</option>
     {
     active && result.map((sponsor:Sponsor,index:number)=>
          <option  value={sponsor.id} >{sponsor.name}</option>    
      )
    }

</select>

它工作得很好。现在我需要将其更改为可搜索列表。我在下面做了。

     import VirtualizedSelect from 'react-virtualized-select'
    import "react-virtualized-select/styles.css";
    import 'react-virtualized/styles.css'
     

 <VirtualizedSelect
        id="sponsor" 
        name="sponsor"
        className="form-control"
        placeholder="Sponsor"
        options={ active && result.map((sponsor:Sponsor,index:number)=>
            {sponsor.name}
          
        )}

     >
       </VirtualizedSelect> 

现在列表中没有任何内容。基本上我的要求是使列表可搜索并将API 数据插入该列表。

你能帮我做同样的事吗？任何其他选择也会非常有帮助

Edit1:-

我需要如下列表。第一行“请选择赞助商”