react实现触底加载

在 React 中实现触底加载可以通过监听滚动事件，判断滚动条是否到达页面底部，然后触发数据加载的操作。以下是一个简单的实现示例：

1. 在组件中添加一个 div 元素作为容器，设置其样式为固定高度并添加滚动属性：

<div style={{ height: '500px', overflow: 'auto' }} onScroll={this.handleScroll}>
  // 渲染数据列表
</div>

2. 在组件中定义 handleScroll 方法，该方法会在滚动事件触发时被调用：

handleScroll = (event) => {
  const { scrollTop, clientHeight, scrollHeight } = event.target;
  if (scrollHeight - scrollTop === clientHeight) {
    // 到达页面底部，触发数据加载操作
  }
}

3. 在触底加载时执行数据加载操作，例如调用接口获取更多数据并合并到原有数据列表中：

handleScroll = (event) => {
  const { scrollTop, clientHeight, scrollHeight } = event.target;
  if (scrollHeight - scrollTop === clientHeight) {
    this.setState({ loading: true }); // 显示加载状态
    fetchData().then((data) => {
      this.setState({
        data: [...this.state.data, ...data],
        loading: false, // 隐藏加载状态
      });
    });
  }
}

以上就是 React 实现触底加载的简单示例，需要注意的是在实际开发中还需要处理一些细节问题，例如防止重复加载、优化数据请求等。