특정 항목으로 스크롤

Question

내 React 구성 요소에서 고유 한 ID를 가진 자체 DIV 요소에 각각 <div id="abc-123">이라는 항목 목록을 표시합니다.

나는 또한 모든 것을 좋게 보이게하기 위해 react-perfect-scrollbar을 사용하고 있습니다.

내 감속기에 변수를 보관하고 activeElementId으로 변경하고 activeElementId 값이 변경되면 자동으로 해당 항목을 화면에 스크롤하고 싶습니다.

activeElementId을 설정하는 것은 쉬운 부분이지만 그 요소로 스크롤하는 방법을 잘 모르며 일부 포인터를 고맙게 생각합니다.

이것은 ListComponent을 포함하는 상위 구성 요소입니다. 내 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> 
    ); 

    } 
} 

는 표현 적 구성 요소입니다

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