Question

我在页面上并排有两个div，左侧是一个无状态组件，显示了有关从右侧选择的选项的信息。

页面本身具有overflow: hidden，左侧组件具有overflow-y: scroll，允许用户上下滚动。

直到这里一切都很好，但是当用户向下滚动然后在右侧选择另一块时，我应该向上滚动此无状态组件。

return (
    <div
      style='display: flex; flex: 1 1 0; height: 100%; overflow-y: scroll'
      ref={myElement => {
        this.myElement = myElement
      }}
    >
       My content
    </div>
  )

一旦我们对该元素进行了引用，我就可以拥有这样的东西：

this.myElement.scrollTop = 0

我正在尝试在此div中放置一个ref，以便一旦该组件收到任何https://stackoverflow.com/a/33204783/1696029更新，便可以滚动，但是该ref不适用于无状态组件。

有什么主意，我该如何仅向上滚动此左无状态组件？

Answer 1

请考虑以下组件层次结构

<Parent>
  <LeftComponent />
  <RightComponent />
</Parent>

您可以在Parent上为LeftComponent定义ref函数。类似

leftComponentRefFunction(myElement) {
  this.myElement = myElement
}

不要忘记将此函数绑定到父构造函数中。

然后，将leftComponentRefFunction函数作为道具发送给无状态组件

<LeftComponent refFunction={this.leftComponentRefFunction} />

现在在LeftComponent内部，使用prop函数设置参考

return (
<div
  style='display: flex; flex: 1 1 0; height: 100%; overflow-y: scroll'
  ref={props.refFunction}
>
   My content
</div>

）

我们在这里基本上要做的是将状态逻辑提升到父组件。

现在，您可以访问父对象this上的leftComponent引用。因此您可以将滚动条设置为0

有没有办法向上滚动无状态组件？

1 个答案: