我有个问题，我不知道怎么解决。
在我的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;
这里还有另一种方法，它允许你选择你希望窗口滚动位置重置到的安装组件，而不需要大量复制ComponentDidUpdate/ComponentDidMount。
下面的例子是用ScrollIntoView()包装Blog组件，这样当Blog组件被挂载时，如果路由改变了，那么HOC的ComponentDidUpdate将更新窗口滚动位置。
你可以很容易地将它包裹在整个应用程序中，这样在任何路由改变时，它都会触发一个窗口重置。
ScrollIntoView.js
import React, { Component } from 'react';
import { withRouter } from 'react-router';
export default WrappedComponent => {
class ResetWindowScroll extends Component {
componentDidUpdate = (prevProps) => {
if(this.props.location !== prevProps.location) window.scrollTo(0,0);
}
render = () => <WrappedComponent {...this.props} />
}
return withRouter(ResetWindowScroll);
}
Routes.js
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from '../components/App';
import About from '../components/pages/About';
import Blog from '../components/pages/Blog'
import Index from '../components/Landing';
import NotFound from '../components/navigation/NotFound';
import ScrollIntoView from '../components/navigation/ScrollIntoView';
export default (
<Route path="/" component={App}>
<IndexRoute component={Index} />
<Route path="/about" component={About} />
<Route path="/blog" component={ScrollIntoView(Blog)} />
<Route path="*" component={NotFound} />
</Route>
);
上面的示例工作得很好，但是如果您已经迁移到react-router-dom，那么您可以通过创建一个封装组件的HOC来简化上面的示例。
同样，您也可以轻松地将它包装在您的路由上(只需将componentDidMount方法更改为上面编写的componentDidUpdate方法示例代码，以及使用withRouter包装ScrollIntoView)。
容器/ ScrollIntoView.js
import { PureComponent, Fragment } from "react";
class ScrollIntoView extends PureComponent {
componentDidMount = () => window.scrollTo(0, 0);
render = () => this.props.children
}
export default ScrollIntoView;
组件/ Home.js
import React from "react";
import ScrollIntoView from "../containers/ScrollIntoView";
export default () => (
<ScrollIntoView>
<div className="container">
<p>
Sample Text
</p>
</div>
</ScrollIntoView>
);
我正在使用React Hooks，想要一些可重用的东西，但也想要一些我可以随时调用的东西(而不是仅仅在渲染之后)。
// utils.js
export const useScrollToTop = (initialScrollState = false) => {
const [scrollToTop, setScrollToTop] = useState(initialScrollState);
useEffect(() => {
if (scrollToTop) {
setScrollToTop(false);
try {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth',
});
} catch (error) {
window.scrollTo(0, 0);
}
}
}, [scrollToTop, setScrollToTop]);
return setScrollToTop;
};
然后使用钩子你可以做:
import { useScrollToTop } from 'utils';
const MyPage = (props) => {
// initialise useScrollToTop with true in order to scroll on page load
const setScrollToTop = useScrollToTop(true);
...
return <div onClick={() => setScrollToTop(true)}>click me to scroll to top</div>
}
这里还有另一种方法，它允许你选择你希望窗口滚动位置重置到的安装组件，而不需要大量复制ComponentDidUpdate/ComponentDidMount。
下面的例子是用ScrollIntoView()包装Blog组件，这样当Blog组件被挂载时，如果路由改变了，那么HOC的ComponentDidUpdate将更新窗口滚动位置。
你可以很容易地将它包裹在整个应用程序中，这样在任何路由改变时，它都会触发一个窗口重置。
ScrollIntoView.js
import React, { Component } from 'react';
import { withRouter } from 'react-router';
export default WrappedComponent => {
class ResetWindowScroll extends Component {
componentDidUpdate = (prevProps) => {
if(this.props.location !== prevProps.location) window.scrollTo(0,0);
}
render = () => <WrappedComponent {...this.props} />
}
return withRouter(ResetWindowScroll);
}
Routes.js
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from '../components/App';
import About from '../components/pages/About';
import Blog from '../components/pages/Blog'
import Index from '../components/Landing';
import NotFound from '../components/navigation/NotFound';
import ScrollIntoView from '../components/navigation/ScrollIntoView';
export default (
<Route path="/" component={App}>
<IndexRoute component={Index} />
<Route path="/about" component={About} />
<Route path="/blog" component={ScrollIntoView(Blog)} />
<Route path="*" component={NotFound} />
</Route>
);
上面的示例工作得很好，但是如果您已经迁移到react-router-dom，那么您可以通过创建一个封装组件的HOC来简化上面的示例。
同样，您也可以轻松地将它包装在您的路由上(只需将componentDidMount方法更改为上面编写的componentDidUpdate方法示例代码，以及使用withRouter包装ScrollIntoView)。
容器/ ScrollIntoView.js
import { PureComponent, Fragment } from "react";
class ScrollIntoView extends PureComponent {
componentDidMount = () => window.scrollTo(0, 0);
render = () => this.props.children
}
export default ScrollIntoView;
组件/ Home.js
import React from "react";
import ScrollIntoView from "../containers/ScrollIntoView";
export default () => (
<ScrollIntoView>
<div className="container">
<p>
Sample Text
</p>
</div>
</ScrollIntoView>
);
