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。您将需要做以下两件事之一。

明确指示列表在this.state.selectedId更改时重新绘制。列表为此公开了一个api。
使用类似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>
        )
    };

反应虚拟化列表选定项目的样式仅在向上滚动时触发

1 个答案: