我有一个问题,我不知道如何解决。在我的react组件中,我在底部显示一长串数据和少量链接。单击任何此链接后,我将在列表中添加新的链接集合,并需要滚动到顶部。
问题是- 呈现新集合 后 如何滚动到顶部?
'use strict'; // url of this component is #/:checklistId/:sectionId var React = require('react'), Router = require('react-router'), sectionStore = require('./../stores/checklist-section-store'); function updateStateFromProps() { var self = this; sectionStore.getChecklistSectionContent({ checklistId: this.getParams().checklistId, sectionId: this.getParams().sectionId }).then(function (section) { self.setState({ section, componentReady: true }); }); this.setState({componentReady: false}); } var Checklist = React.createClass({ mixins: [Router.State], componentWillMount: function () { updateStateFromProps.call(this); }, componentWillReceiveProps(){ updateStateFromProps.call(this); }, render: function () { if (this.state.componentReady) { return( <section className='checklist-section'> <header className='section-header'>{ this.state.section.name } </header> <Steps steps={ this.state.section.steps }/> <a href=`#/${this.getParams().checklistId}/${this.state.section.nextSection.Id}`> Next Section </a> </section> ); } else {...} } }); module.exports = Checklist;
由于原始解决方案是为 react的 早期版本提供的,因此这里进行了更新:
constructor(props) { super(props) this.myRef = React.createRef() // Create a ref object } componentDidMount() { this.myRef.current.scrollTo(0, 0); } render() { return <div ref={this.myRef}></div> } // attach the ref property to a dom element