javascript - What is the problem of glitch when scrolling using react-window? - Stack Overflow

admin管理员组

文章数量:1244220

I want to do row virtualization when scrolling (so that data is shown when scrolling)

But when scrolling, now the terrible glitches appear

Tell me what is the problem?

project - male-wind.surge.sh

A ponent with a table (react-window is used there):

import React, { Component } from "react";
import { connect } from "react-redux";
import actions from "../../actions";
import PropTypes from "prop-types";
import sort from "./sort";
import { FixedSizeList } from 'react-window';

function TitleColumn(data) {
  return (
    <Grid item xs={1}>
      <Box className="title_elem">
        <h3
          className="table_title-text"
          onClick={sort.bind(null, `${data.title.toLowerCase()}`, data.props)}
        >
          {data.title}
        </h3>
        {data.props.fourthData.data === `${data.title.toLowerCase()}` ? (
          <p>{data.props.fifthData.data}</p>
        ) : null}
      </Box>
    </Grid>
  );
}


class Table extends Component {
  render() {
    const data = this.props.info;
    const Row = ({ index, style}) => {
      return (
        <Grid container className="table_row">
          <Grid item xs={1}>
            <Box className="table_elem name_elem">{data[index].name}</Box>
          </Grid>
          <Grid item xs={1}>
            <Box className="table_elem job_elem">{data[index].job}</Box>
          </Grid>
          <Grid item xs={1}>
            <Box className="table_elem city_elem">{data[index].city}</Box>
          </Grid>
          <Grid item xs={1}>
            <Box className="table_elem country_elem">{data[index].country}</Box>
          </Grid>
          <Grid item xs={1}>
            <Box className="table_elem latitude_elem">{data[index].latitude}</Box>
          </Grid>
          <Grid item xs={1}>
            <Box className="table_elem longitude_elem">{data[index].longitude}</Box>
          </Grid>
          <Grid item xs={1}>
            <Box className="table_elem date_elem">
              {`${data[index].date.toLocaleString("en", {
            year: "numeric",
            month: "long",
            day: "numeric"
          })}`}
            </Box>
          </Grid>
        </Grid>
      )
    };
    return (
        <Grid
          container
          className="developer_block-time_feature time_feature_block"
        >
          <Grid container className="table_title">
            <TitleColumn props={this.props} title="Name" />
            <TitleColumn props={this.props} title="Job" />
            <TitleColumn props={this.props} title="City" />
            <TitleColumn props={this.props} title="Country" />
            <TitleColumn props={this.props} title="Latitude" />
            <TitleColumn props={this.props} title="Longitude" />
            <TitleColumn props={this.props} title="Date" />
          </Grid>
          <FixedSizeList                 <---------------use react-window
            height={500} 
            itemSize={60}
            itemCount={data.length}
            className="list-container"
          >
            {Row}
          </FixedSizeList>
        </Grid>
    );
  }
}

Table.propTypes = {
  fourthData: PropTypes.object.isRequired,
  fifthData: PropTypes.object.isRequired
};

const mapStateToProps = store => {
  return {
    firstData: store.firstData,
    secondData: store.secondData,
    thirdData: store.thirdData,
    fourthData: store.fourthData,
    fifthData: store.fifthData
  };
};

const mapDispatchToProps = dispatch => {
  return {
    setData: data => dispatch(actions.setData(data)),
    changeSearchData: searchData =>
      dispatch(actions.changeSearchData(searchData)),
    changeSort: sort => dispatch(actions.changeSort(sort)),
    setSortTitle: sortField => dispatch(actions.setSortTitle(sortField)),
    changeArrow: arrow => dispatch(actions.changeArrow(arrow))
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Table);

I try to use this solution, but it does not help -

I want to do row virtualization when scrolling (so that data is shown when scrolling)

But when scrolling, now the terrible glitches appear

Tell me what is the problem?

project - male-wind.surge.sh

A ponent with a table (react-window is used there):

import React, { Component } from "react";
import { connect } from "react-redux";
import actions from "../../actions";
import PropTypes from "prop-types";
import sort from "./sort";
import { FixedSizeList } from 'react-window';

function TitleColumn(data) {
  return (
    <Grid item xs={1}>
      <Box className="title_elem">
        <h3
          className="table_title-text"
          onClick={sort.bind(null, `${data.title.toLowerCase()}`, data.props)}
        >
          {data.title}
        </h3>
        {data.props.fourthData.data === `${data.title.toLowerCase()}` ? (
          <p>{data.props.fifthData.data}</p>
        ) : null}
      </Box>
    </Grid>
  );
}


class Table extends Component {
  render() {
    const data = this.props.info;
    const Row = ({ index, style}) => {
      return (
        <Grid container className="table_row">
          <Grid item xs={1}>
            <Box className="table_elem name_elem">{data[index].name}</Box>
          </Grid>
          <Grid item xs={1}>
            <Box className="table_elem job_elem">{data[index].job}</Box>
          </Grid>
          <Grid item xs={1}>
            <Box className="table_elem city_elem">{data[index].city}</Box>
          </Grid>
          <Grid item xs={1}>
            <Box className="table_elem country_elem">{data[index].country}</Box>
          </Grid>
          <Grid item xs={1}>
            <Box className="table_elem latitude_elem">{data[index].latitude}</Box>
          </Grid>
          <Grid item xs={1}>
            <Box className="table_elem longitude_elem">{data[index].longitude}</Box>
          </Grid>
          <Grid item xs={1}>
            <Box className="table_elem date_elem">
              {`${data[index].date.toLocaleString("en", {
            year: "numeric",
            month: "long",
            day: "numeric"
          })}`}
            </Box>
          </Grid>
        </Grid>
      )
    };
    return (
        <Grid
          container
          className="developer_block-time_feature time_feature_block"
        >
          <Grid container className="table_title">
            <TitleColumn props={this.props} title="Name" />
            <TitleColumn props={this.props} title="Job" />
            <TitleColumn props={this.props} title="City" />
            <TitleColumn props={this.props} title="Country" />
            <TitleColumn props={this.props} title="Latitude" />
            <TitleColumn props={this.props} title="Longitude" />
            <TitleColumn props={this.props} title="Date" />
          </Grid>
          <FixedSizeList                 <---------------use react-window
            height={500} 
            itemSize={60}
            itemCount={data.length}
            className="list-container"
          >
            {Row}
          </FixedSizeList>
        </Grid>
    );
  }
}

Table.propTypes = {
  fourthData: PropTypes.object.isRequired,
  fifthData: PropTypes.object.isRequired
};

const mapStateToProps = store => {
  return {
    firstData: store.firstData,
    secondData: store.secondData,
    thirdData: store.thirdData,
    fourthData: store.fourthData,
    fifthData: store.fifthData
  };
};

const mapDispatchToProps = dispatch => {
  return {
    setData: data => dispatch(actions.setData(data)),
    changeSearchData: searchData =>
      dispatch(actions.changeSearchData(searchData)),
    changeSort: sort => dispatch(actions.changeSort(sort)),
    setSortTitle: sortField => dispatch(actions.setSortTitle(sortField)),
    changeArrow: arrow => dispatch(actions.changeArrow(arrow))
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Table);

I try to use this solution, but it does not help - https://github./bvaughn/react-virtualized/issues/1327

• javascript
• reactjs
• redux
• react-redux
• react-window

Share Improve this question Follow asked Mar 14, 2020 at 6:51 Kirill MargheritiKirill Margheriti 16111 silver badge66 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 16

you have to apply the style passed by list for list element rendering which sets height, width and top attributes. you can do as below

const Row = ({ index, style}) => {
      return (
        <Grid container className="table_row" style={style}>
          <Grid item xs={1}>
            <Box className="table_elem name_elem">{data[index].name}</Box>
          </Grid>....…..

本文标签： javascriptWhat is the problem of glitch when scrolling using reactwindowStack Overflow