滾動到特定項目

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> 
    ); 
    } 
}