Question

在反应＆＃34; ^ 15.4.1＆＃34;中，我想在重新加载后显示页面的中间部分。所以我想尝试使用滚动条，但我收到一个错误，

main.js:43122 Uncaught TypeError: Cannot read property 'scrollTop' of null
 at ref (main.js:43122)
 at detachRef (main.js:82172)
 at Object.ReactRef.detachRefs (main.js:82227)
 at Object.receiveComponent (main.js:10145)
 at ReactCompositeComponentWrapper._updateRenderedComponent (main.js:77618)

导入类似import { Scrollbars } from 'react-custom-scrollbars';，版本为4.0.1

在.jsx文件中，

componentDidMount() {
  this.scrollTop(200);
}

handleScrolling = (frame) => {
 if(frame.top === 1) this.setState({ loading: true })
}

scrollTop = (value) => {
  if(this.refs.scrollbar) this.refs.scrollbar.scrollTop(value);
}

<Scrollbars
    ref={(scrollbar) => {scrollbar.scrollTop(200);}}
    style={{ height: '100vh' }} onScrollFrame={this.handleScrolling}>
    ...

如何解决此问题？其实我是ReactJS的新手。请帮我讲一下。

Answer 1

在这部分中，您只需要放置参考号。

<Scrollbars
  ref={(scrollbar) => { this.scrollbar = scrollbar; }}

然后你可以使用ref做你的东西。

scrollTop (value) => {
  this.scrollbar.scrollTop(value);
}

Answer 2

此处使用ref={(scrollbar) => {scrollbar.scrollTop(200);}}，您将返回scrollbat.scrollTop(200)作为参考值。

因此，您可以将ref值指定为以下

<Scrollbars ref='myScrollbar' />

并使用

访问它

this.refs.myScrollbar

或在参考

中指定this.scrollbar

<Scrollbars ref={ scrollbar => { this.scrollbar = scrollbar } }

并使用

访问它

this.scrollbar

More info on the ReactJS 'Refs and the DOM' docs

ReactJS - 如何使用＆＃39; ref＆＃39;滚动条的属性？

2 个答案: