javascript - 如何滚动到其他组件中的列表元素？

Question

如何在其他组件中滚动到列表的元素？

class Posts extends Components {
  render() {
    <ul>
     {this.props.posts.map((post) => 
        <li key={post.id}>{post.title}</li>
     )} 
    </ul>
  }

   //redux
}

class OtherComponent extends Components {
  onClickHandler = (id) => {
     //!!!!!!!!
     //scroll page to li with key={post.id}
  }

  render() {
    <div>
     {this.props.posts.map((post) => 
        <div key={post.id} onClick={() => this.onClickHandler(post.id)}>{post.title}</div>
     )} 
    </div>
  }

   //redux
}

我在这里找到了解决方案:ReactJS how to scroll to an element

但都是针对单个元素的。

如果我有列表，我需要为每个人创建一个引用吗？帖子列表可以更改，所以我不能这样做。

Answer 1

您可以在遍历列表时根据项目的键构建 refs 的索引，然后使用该键查找 ref 并调用 scrollIntoView元素。

更新:修改后的代码示例现在展示了如何将引用列表存储在子组件中并调用该子组件上的函数以滚动到列表中的特定项目。使用 refs，您可以在子组件实例上调用函数。这并不理想，因为它打破了 React 的声明模型，但在某些情况下，特别是在直接与 DOM 元素交互以获得焦点或滚动时，它是必需的。如果您还没有，我还建议您阅读关于 Refs and the DOM 的简短 React 指南。 ，以及 Forwarding Refs以及它们如何提供帮助。

const items = Array.from(new Array(1000).keys()).map(m => ({
  id: m + 1,
  name: `Item ${m + 1}`
}));

const ComponentA = ({ children, onClick }) => (
  <button type="button" onClick={onClick}>
    {children}
  </button>
);

class ComponentB extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.itemRefs = {};
  }

  scrollTo(id) {
    this.itemRefs[id].scrollIntoView();
  }

  render() {
    return (
      <ul>
        {items.map(m => (
          <li key={m.id} ref={el => (this.itemRefs[m.id] = el)}>
            {m.name}
          </li>
        ))}
      </ul>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <ComponentA onClick={() => this.listComponent.scrollTo(1000)}>
          Jump to Item 1000
        </ComponentA>
        <ComponentB ref={e => (this.listComponent = e)} />
        <ComponentA onClick={() => this.listComponent.scrollTo(1)}>
          Jump to Item 1
        </ComponentA>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>