Question

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

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

我在名为activeElementId的reducer中保留一个变量，当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> ); } }

滚动到特定项目

1 个答案: