React-virtualized 列表选择的项目样式仅在向上滚动时触发

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 只会 re-render 当 ListRowProps 提供的道具之一发生变化时你的组件。它不知道您的渲染方法在内部使用 this.props.dataList 和 this.state.selectedId。您需要执行以下两项操作之一。

明确告诉 List 在 this.state.selectedId 改变时重绘。为此，列表公开了一个 api。
使用类似 React 的上下文 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>
        )
    };

React-virtualized 列表选择的项目样式仅在向上滚动时触发

React-virtualized List selected item styling only fire when scroll up

reactjs

react-virtualized