反应虚拟化。调用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个子节点（并且工作正常）。我注意到在反应虚拟化的用法中有很多奇怪的第一次加载问题（比如你的列表最初没有加载）。请记住，如果您要提供反应虚拟化数据，您希望它能够更新，请确保数据正在某处更改支柱。否则内部不会重新渲染。