javascript - react 虚拟化。调用 List 元素的公共(public)方法无效

Question

我正在尝试使用 React-virtualized。

在下面的组件中，我试图调用公共(public)方法。问题是，调用了这些方法(我在调试时看到它们被调用了，但是它们没有可见的效果。

import React, {Component} from "react";
import {List, AutoSizer, CellMeasurer, CellMeasurerCache} from "react-virtualized";

class InfiniteScroller extends Component {
    constructor(props) {
        super(props);
        this.cache = new CellMeasurerCache({
            fixedWidth: true,
            defaultHeight: 50
        });
        this.state = {
            currentLineSt: 50,
            currentLineEnd: 100,
        }
    }

    renderRow = ({index, parent, key, style}) => {
        let className = "code-line";
        if (this.state.currentLineSt <= index && this.state.currentLineEnd >= index) {
            className += " code-line-focus";
        }

        return (
            <CellMeasurer
                key={key}
                cache={this.cache}
                parent={parent}
                columnIndex={0}
                rowIndex={index}
            >
                <div style={style} className={className}>
                    <span className={"code-index"}><b>{index}: </b></span>
                    <span className={"code"} style={{whiteSpace: "pre-wrap"}}>{this.props.data[index]}</span>
                </div>
            </CellMeasurer>
        )
    };

componentDidUpdate() {
    // these methods are called but do nothing visible
    this.myInfiniteList.forceUpdateGrid();
    this.myInfiniteList.scrollToRow(100);
}

componentDidMount() {
    // these methods are called but do nothing visible
    this.myInfiniteList.forceUpdateGrid();
    this.myInfiniteList.scrollToRow(100);
}

    render() {
        return (
            <AutoSizer>
                {
                    ({width, height}) => {
                        return <List
                            ref={(ref) => this.myInfiniteList = ref}
                            forceUpdateGrid
                            rowCount={this.props.data.length}
                            width={width}
                            height={height}
                            deferredMeasurementCache={this.cache}
                            rowHeight={this.cache.rowHeight}
                            rowRenderer={this.renderRow}
                        />
                    }
                }
            </AutoSizer>
        );
    }
}

export default InfiniteScroller;

我需要调用他们，因为:1)数据改变后，线宽不变2) 需要一种在点击时滚动到行的方法。

如有任何想法为什么它不起作用或我如何以不同的方式做到这一点，我们将不胜感激。

Answer 1

您必须与 Brian 多交谈才能真正理解，但您的列表似乎未在 componentDidMount 上完全初始化。

在此沙箱中注意(拿走你的并进行调整):https://codesandbox.io/s/lro6358jr9

componentDidMount 中元素的日志有一个 0 数组用于子元素，而当我稍后单击以执行相同操作时的日志有 26 个子元素(并且工作正常)。我注意到在 react-virtualized 用法中有很多奇怪的首次加载问题(比如你的列表最初没有加载)。请记住，如果您提供 react 虚拟化数据，您希望它更新，请确保数据正在某处更改 Prop 。否则里面的任何东西都不会重新渲染。