React Renders 在我的组件底部!没有顶部

Posted

技术标签:

【中文标题】React Renders 在我的组件底部!没有顶部【英文标题】:React Renders at the bottom of my component! no the top 【发布时间】:2019-06-14 01:51:12 【问题描述】:

当我点击移动视图中的一个链接时,它会为产品详细信息页面呈现一个新组件。

但是渲染的视图总是从底部开始..

如何更改它以始终从顶部显示新组件??

【问题讨论】:

您的问题已被回答here。 :) 谢谢@SebastianWaldbauer Scroll to the top of the page after render in react.js的可能重复 【参考方案1】:

对于借助钩子的无状态组件,您可以通过以下方式实现:

useEffect(() => 
   window.scrollTo(0,0);
, [])

【讨论】:

【参考方案2】:

你可以试试这个:

componentDidMount() 
  window.scrollTo(0, 0)

【讨论】:

如果它在无状态组件上怎么办? 好的,这就是我所做的: const componentX = ( something ) => window.scrollTo(0, 0) return (some html code)

以上是关于React Renders 在我的组件底部!没有顶部的主要内容,如果未能解决你的问题,请参考以下文章

如何优化状态变化引起的react re-renders?

..Use state error: Too many re-renders React 限制渲染次数以防止无限循环

react-bootstrap 导航栏填充

为啥在 React 中,当父组件重新渲染时子组件不会重新渲染(子组件没有被 React.memo 包裹)?

在我的 React 组件中使用 CSS 模块时 CSS className 没有反映

关于React报Too many re-renders. React limits the number of renders to prevent an infinite错误的解决方案