React-virtualized List selected item 样式仅在向上滚动时触发

Question

我正在使用 React-virtualized 将数据显示为列表。 我为列表项添加了选定的样式，它假设一旦被点击就会突出显示该项目。 当前的问题是onClick 被触发，但选择样式仅在向上滚动列表时显示。

List component

 <div className={styles.autoSizerContainer}>
                <AutoSizer>
                    {({width, height}) => {
                        // Selected customer styling only fire after scroll
                        return (
                            <List
                                width={width}
                                height={height}
                                rowHeight={50}  
                                rowRenderer={this.renderRow}
                                rowCount={rowCount}
                                overscanRowCount={3}    
                                className={styles.list}
                            />
                        )
                    }}
                </AutoSizer>
            </div>

List item

private renderRow = ({index, key, style}: ListRowProps) => {
        const data = this.props.dataList[index];
        return (
            <div style={style} key={data.id}>
                <div className={styles.listItem}>
                    <div>data.name</div>
                    <Item key={data.id} 
                         isDataSelected={this.state.selectedId === data.id}
                    /> //return true will show selected styling
                </div>
            </div>
        )
    };

"react-virtualized": "^9.21.0",

"react": "^16.8.4"

欢迎提出任何想法！

谢谢！！！

Answer 1

React-Virtualized 只会在 ListRowProps 提供的其中一个道具发生变化时重新渲染您的组件。它不知道您的渲染方法在内部使用了this.props.dataList 和this.state.selectedId。您需要做以下两件事之一。

1. 明确告诉列表在this.state.selectedId 更改时重绘。 List 为此目的公开了一个 api。

2. 使用类似 React 的 Context api 的方式提供必要的数据，以便可以检测到更改。像这样的东西应该可以工作：

const {Provider, Consumer} = React.createContext<number | null>(null);

 <div className={styles.autoSizerContainer}>
                <AutoSizer>
                    {({width, height}) => {
                        // Selected customer styling only fire after scroll
                        return (
                            <Provider value={this.state.selectedId}>
                            <List
                                width={width}
                                height={height}
                                rowHeight={50}  
                                rowRenderer={this.renderRow}
                                rowCount={rowCount}
                                overscanRowCount={3}    
                                className={styles.list}
                            />
                            </Provider>
                        )
                    }}
                </AutoSizer>
            </div>

private renderRow = ({index, key, style}: ListRowProps) => {
        const data = this.props.dataList[index];
        return (
            <Consumer>
            {(selectedId) =>
            <div style={style} key={data.id}>
                <div className={styles.listItem}>
                    <div>data.name</div>
                    <Item key={data.id} 
                         isDataSelected={selectedId === data.id}
                    /> //return true will show selected styling
                </div>
            </div>
            }
            </Consumer>
        )
    };