react-virtualized

问题 I'm a little uncertain as how to achieve dynamic heights of a List using react-virtualized. I have a component as follows: import { List } from 'react-virtualized'; <List height={400} rowCount={_.size(messages)} rowHeight={(index) => { return 100; // This needs to measure the dom. }} rowRenderer={({ key, index, style }) => <Message style={style} {...messages[index]} />}} width={300} /> I have looked at using CellMeasurer as per the docs which says it can be used with the List component but I

问题 My _loadMoreRows and _isRowLoaded are not getting called, so loadedRowsMap remains empty and I am unable to identify the rows loaded to avoid making HTTP request . Here's my complete code : import React, { Component } from 'react'; import { connect } from 'react-redux'; import {formatDate} from '../../helper/date'; import { recentActivitiAction } from '../actions/dashboardAction'; import { BeatLoader } from 'react-spinners'; import {AutoSizer, List, CellMeasurer, InfiniteLoader,

问题 I am trying to add sorting to my project with the table sorting demo on Github. My code: import React from 'react'; import PropTypes from 'prop-types'; import { Table, Column, SortDirection, SortIndicator } from 'react-virtualized'; import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'; import 'react-virtualized/styles.css'; class NewTable extends React.Component { constructor(props) { super(props); this.dataList = props.list; this.state = { headerHeight: 50, rowHeight: 25,

问题 I want to make infinite scroll page with image grid. Which parts of react-virtualized package I need? InfiniteLoader and WindowScroller and Masonry ? And how define limit of records in query when I scroll window. 回答1: WindowScroller works with the Masonry component but InfiniteLoader only works with Grid and List . (The docs mention this.) And how define limit of records in query when I scroll window. This question isn't really clear. Perhaps you should try something and then post a new

问题 So I've got both chunks of code written for both the API request, as well as the grid rendering, however I'm confused as to how to combine the two in a react environment. Any suggestions? (this is using react-axios) <Request method="get", /* get, delete, head, post, put and patch - required */ url="http://coincap.io/front", /* url endpoint to be requested - required */ debounce={50} /* minimum time between requests events - optional */ onSuccess={(response)=>{}} /* called on success of axios

问题 When a user tabs into a List and the List gets focus I want to put a border around the List's parent. It would be great if I could call onFocus/onBlur on the List. Any advice? 回答1: Currently there is no way to attach onBlur or onFocus events (or anything other than onScroll ) to a Grid . (The same is true for List which just decorates a Grid ). You could add this behavior yourself using the ref though. Here is an example Plnkr: https://plnkr.co/edit/TVxnhf?p=preview The key part is:

问题 I have a <List /> component where I want to add an initial padding-top to the wrapper . Since all the elements are absolute positioned I found this solution but I wonder if it's right or is there another solution less expensive: const rowRenderer = ({ index, key, style, isScrolling }) => { // ... return ( <ul key={key} style={{ ...style, top: style.top + 50, }}> { items.map(itemRenderer) } </ul> ) } The related part is the style prop. 回答1: You can avoid the unnecessary object-creation and

问题 I'm using RV List to load a large document with custom formatting. It has worked like a charm, but I am running into the following 2 issues: I currently set up a list within a cellmeasurer based on this to calculate the dynamic heights of rows (width is fixed). I managed to use scrollToindex to find the row I want, but some rows are quite large and I want to be able to scroll to a specific place within the row. I understand that I need to use scrollTop to do so, but I don't know how to get

问题 I'm doing a React/Redux project, and need to implement a virtualized/infinite-loading list. react-virtualized seems intended to do the job, but even after reading all of the available docs and reading a number of StackOverflow posts, I haven't been able to get it working or found a clear explanation of the mechanics of how the components actually work. The primary examples I've looked at are: https://github.com/bvaughn/react-virtualized/blob/master/docs/creatingAnInfiniteLoadingList.md https:

问题 I have a react component that displays a one-dimensional list of items in a grid pattern. Every item has the same width and height, and they are located within three columns. There can be a lot of these, so I decided to give react-virtualized a whirl, using the Masonry component, which seems to have been written for precisely this use case. It works well, but for one caveat: If the items change their height, I cannot get Masonry to notice. Here's a reduced example: constructor(props) { [...]