滚动到特定项目

Question

在我的React组件中，我正在显示项目列表 - 每个项目都在其自己的DIV元素中，每个项目具有唯一的ID，即<div id="abc-123">。

我还使用react-perfect-scrollbar使整个事情更好看。

我在我的减速器中保存一个名为activeElementId的变量，当activeElementId的值发生变化时，我想自动滚动到屏幕上的该项目。

设置activeElementId是很容易的部分，但我不确定如何滚动到该元素，并会欣赏一些指针。

这是包含ListComponent的父组件。

class MyComponent extends Component { 

    constructor(props) { 
     super(props); 
    } 

    render() { 

     return(

     <div> 
      {this.props.items.length > 0 
       ? 
       <PerfectScrollBar> 
        <ListComponent items={this.props.items} /> 
       </PerfectScrollBar> 
       : null} 
     </div> 
    ); 

    } 
} 

我ListComponent是一个表象的成分：

const ListComponent = ({ items }) => { 

    return(
     <ul className="pretty-list"> 
      {items.map(item => <ItemComponents item={item} />)} 
     </ul> 
    ); 
} 

export default ListComponent; 

而且ItemComponent是一个表象的组成部分，也是：

const ItemComponent = ({ Item }) => { 

    return(
     <li> 
      <div id={item.id}> 
       {item.someProperty} 
      </div> 
     </li> 
    ); 
} 

export default ItemComponent; 

我真的很喜欢保持ListComponent的想法和ItemComponent独立和作为表示组件，这有助于保持代码更简单，更易于管理。不知道这是否会让实现自动滚动逻辑变得困难。

Answer 1

您使用的库有一个名为setScrollTop的方法。您可以使用getBoundingClientRect。要使用getBoundingClientRect，您需要具有dom元素。你没有给出任何关于你如何设置或获取活动元素的代码，但我会尝试给你一个例子。也许它会帮助你实现你的代码。

例

class MyComponent extends Component { 

    constructor(props) { 
    super(props); 
    } 
    _onListItemChange = (itemsPosition) => { 
    this.scrollbar.setScrollTop(itemsPosition.top); 
    } 
    render() { 
    return (
     <div> 
     {this.props.items.length > 0 ? 
      <PerfectScrollBar ref={(scrollbar) => { this.scrollbar = scrollbar; }}> 
      <ListComponent 
       items={this.props.items} 
       onListItemChange={this._onListItemChange} /> 
      </PerfectScrollBar> 
     : null} 
     </div> 
    ); 
    } 

---

const ListComponent = ({ items, onListItemChange }) => { 

    return(
     <ul className="pretty-list"> 
      {items.map(item => (
       <ItemComponents 
       item={item} 
       onListItemClick={onListItemChange} /> 
      ))} 
     </ul> 
    ); 
} 

export default ListComponent; 

---

import { render, findDOMNode } from 'react-dom'; 

class ListItem extends React.Component { 

    _onClick =() => { 
    let domElement = findDOMNode(this.item); 
    this.props.onListItemClick(domElement.getBoundingClientRect()); 
    } 

    render() { 
    const { item } = this.props; 
    return(
     <li> 
     <div id={item.id} ref={(item) => { this.item = item; }} onClick={this._onClick}> 
      {item.someProperty} 
     </div> 
     </li> 
    ); 
    } 
}