反应虚拟化。调用 List 元素的公共方法无效

Question

我正在尝试从 React-virtualized 中使用。

在以下组件中，我尝试调用公共方法。问题是，这些方法被调用了（我在调试时看到它们被调用，但它们没有明显的效果。

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 个子元素（并且工作正常）。 我注意到反应虚拟化使用中有很多奇怪的首次加载问题（比如你的列表最初没有加载）。请记住，如果您要提供您希望它更新的反应虚拟化数据，请确保数据正在某处更改道具。否则里面的任何东西都不会重新渲染。