特定のアイテムへのスクロール

Question

私のリアクションコンポーネントでは、アイテムのリストを表示しています。それぞれのアイテムは、独自のIDを持つDIVエレメント（<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; 

I本当に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> 
    ); 
    } 
}