Question

反应列表具有方法“ getVisibleRange（）”。 getVisibleRange（）=> [firstIndex，lastIndex]。示例显示了如何访问此对象：

onScrollHandler() {
    console.log('onScrollHandler visible', this.getVisibleRange());
}

在类组件中带有“ this”关键字。是否可以在功能组件内访问getVisibleRange（）方法？例如：

const handleScroll = () => {
    let [firstIndex, lastIndex] = getVisibleRange() <-- ??
}
<div id="list" onScroll={handleScroll}></div>

更新：可复制的代码

import React, {useState, useEffect} from 'react'
import ReactList from 'react-list'
var faker = require('faker')

const TalentSearch = () => {      
    let items = [...new Array(500)].map(() => faker.fake(faker.name.findName()))

    const renderItem = (index, key) => {
            return <div key={key}>{items[index]}</div>
        }

    const handleScroll = () => {
            // access getVisibleRange() here?
        }
        return (
            <div>
                <h1>Search Results</h1>
                <div id="list" style={{overflow: 'auto', maxHeight: 400}} onScroll={handleScroll}>
                    <ReactList
                        itemRenderer={renderItem}
                        length={items.length}
                        initialIndex={50}
                        type='uniform'
                        scrollTo={50}
                    />
                </div>
            </div>
        )
    }

    export default TalentSearch

Answer 1

您需要通过引用来访问它，并带有钩子，您可以使用Difference between text and innerHTML using Selenium：

const TalentSearch = () => {
  const listRef = useRef();
  return <ReactList ref={listRef} />;
};

然后，您可以访问如下方法：

listRef.current.getVisibleRange();

如何在功能组件中访问react-list getVisibleRange（）

1 个答案: