我有一个聊天小部件，每次向上滚动时会拉出一系列消息的数组。 我现在面临的问题是当消息加载时，滑块保持固定在顶部。 我希望它能专注于以前数组的最后一个索引元素。 我想出了通过传递索引来生成动态引用的方法，但我还需要知道要使用什么样的滚动函数才能实现这一点。
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
//scroll to testNode
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
const ScrollDemo = () => {
const myRef = useRef(null)
const executeScroll = () => myRef.current.scrollIntoView()
// run this function from an event handler or an effect to execute scroll
return (
<>
<div ref={myRef}>Element to scroll to</div>
<button onClick={executeScroll}> Click to scroll </button>
</>
)
}
class ReadyToScroll extends Component {
constructor(props) {
super(props)
this.myRef = React.createRef()
}
render() {
return <div ref={this.myRef}>Element to scroll to</div>
}
executeScroll = () => this.myRef.current.scrollIntoView()
// run this method to execute scrolling.
}
class ReadyToScroll extends Component {
render() {
return <div ref={ (ref) => this.myRef=ref }>Element to scroll to</div>
}
executeScroll = () => this.myRef.scrollIntoView()
// run this method to execute scrolling.
}
字符串引用会影响性能，不可组合，并且正在逐渐被淘汰（2018年8月）。
字符串引用存在一些问题，被认为是遗留代码，将很可能在未来的版本中被移除。[React官方文档]
/* css */
html {
scroll-behavior: smooth;
}
我们希望将 ref 附加到一个 DOM 元素上，而不是一个 React 组件上。因此，在将其传递给子组件时，我们不能将 prop 命名为 ref。
const MyComponent = () => {
const myRef = useRef(null)
return <ChildComp refProp={myRef}></ChildComp>
}
const ChildComp = (props) => {
return <div ref={props.refProp} />
}
window.scrollTo(0, offsetTop)是当前浏览器支持更好的更好的选择。 - MoMo这对我有效
this.anyRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
编辑：根据评论，我想进一步阐述这一点。
const scrollTo = (ref) => {
if (ref && ref.current /* + other conditions */) {
ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
}
<div ref={scrollTo}>Item</div>
ref.current 仍然保持未定义。为什么？ - Junaid我有一个简单的场景，当用户点击我的Material UI导航栏中的菜单项时，我希望将他们滚动到页面上的某个部分。 我可以使用refs并将它们穿过所有组件，但我讨厌通过多个组件传递props，因为这会使代码变得脆弱。
我只在我的React组件中使用了原生JS，结果证明它完全正常。 在我想要滚动到的元素上放置了一个ID，在我的标题组件中我只是这样做。
const scroll = () => {
const section = document.querySelector( '#contact-us' );
section.scrollIntoView( { behavior: 'smooth', block: 'start' } );
};
document.querySelector()而不是ref是一种不好的做法吗？这是一种反模式吗？ - yeln只需找到您已经确定的元素的顶部位置 https://www.w3schools.com/Jsref/prop_element_offsettop.asp，然后通过scrollTo方法滚动到该位置 https://www.w3schools.com/Jsref/met_win_scrollto.asp
类似这样的内容应该有效:
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
window.scrollTo(0, tesNode.offsetTop);
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
更新：
自从React v16.3以来，React.createRef()更受欢迎。
constructor(props) {
super(props);
this.myRef = React.createRef();
}
handleScrollToElement(event) {
if (<some_logic>){
window.scrollTo(0, this.myRef.current.offsetTop);
}
}
render() {
return (
<div>
<div ref={this.myRef}></div>
</div>)
}
ReactDOM.findDomNode() 是更好的实践 - 因为 React 重新渲染组件，通过 ID 获取的 div 在调用函数时可能不存在。 - Good IdeafindDOMNode。在大多数情况下，您可以将ref附加到DOM节点上，并完全避免使用findDOMNode。 - Facyo Kouchthis.myRef.current.scrollIntoView()而不是window.scrollTo(0, this.myRef)。 - Babbz77专用钩子/函数可以隐藏实现细节，并为组件提供简单的API。
const useScroll = () => {
const elRef = useRef(null);
const executeScroll = () => elRef.current.scrollIntoView();
return [executeScroll, elRef];
};
在任何功能组件中使用它。
const ScrollDemo = () => {
const [executeScroll, elRef] = useScroll()
useEffect(executeScroll, []) // Runs after component mounts
return <div ref={elRef}>Element to scroll to</div>
}
const utilizeScroll = () => {
const elRef = React.createRef();
const executeScroll = () => elRef.current.scrollIntoView();
return { executeScroll, elRef };
};
可以在任何类组件中使用它。
class ScrollDemo extends Component {
constructor(props) {
super(props);
this.elScroll = utilizeScroll();
}
componentDidMount() {
this.elScroll.executeScroll();
}
render(){
return <div ref={this.elScroll.elRef}>Element to scroll to</div>
}
}
useScroll的返回类型声明为[() => void, RefObject<HTMLInputElement>]。然后你就可以毫无问题地调用executeScroll()了。 - kasztof现在您可以使用React Hook API中的useRef
https://reactjs.org/docs/hooks-reference.html#useref
let myRef = useRef()
<div ref={myRef}>My Component</div>
window.scrollTo({ behavior: 'smooth', top: myRef.current.offsetTop })
console.log可以看到它正在执行您的window.scrollTo语句（已调整为我的情况），但它仍然无法滚动。这可能与我是否使用了React Bootstrap Modal有关吗？ - robertwerner_sf最好的方法是使用 element.scrollIntoView({ behavior: 'smooth' })。这将使用漂亮的动画将元素滚动到视图中。
当与React的useRef()结合使用时，可以按照以下方式完成。
import React, { useRef } from 'react'
const Article = () => {
const titleRef = useRef()
function handleBackClick() {
titleRef.current.scrollIntoView({ behavior: 'smooth' })
}
return (
<article>
<h1 ref={titleRef}>
A React article for Latin readers
</h1>
// Rest of the article's content...
<button onClick={handleBackClick}>
Back to the top
</button>
</article>
)
}
当您想要滚动到React组件时，需要将ref转发给呈现的元素。本文将更深入地探讨这个问题。
(ref) => window.scrollTo(0, ref.current.offsetTop)，但只得到了一个很小的偏移量，没有到达目标位置。我认为这是因为引用位置在开始时被计算出来，然后没有更新。你的建议解决了我的问题，而被接受的答案却没有。 - Willy您也可以使用 scrollIntoView 方法来滚动到指定的元素。
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
tesNode.scrollIntoView();
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
我可能晚了加入这个派对，但我一直在尝试以正确的方式向我的项目实现动态引用，并且到目前为止我找到的所有答案都不能令我满意，因此我想出了一个解决方案，我认为它很简单并且使用了React的原生和推荐的方法来创建引用。
有时你会发现文档编写的方式假定你有一个已知数量的视图，在大多数情况下，这个数量是未知的，因此您需要一种解决这个问题的方法，创建动态引用以显示类中需要显示的未知数量的视图。
所以我能想到最简单的解决方案，也是完美无缺的解决方案，就是按照以下方式操作：
class YourClass extends component {
state={
foo:"bar",
dynamicViews:[],
myData:[] //get some data from the web
}
inputRef = React.createRef()
componentDidMount(){
this.createViews()
}
createViews = ()=>{
const trs=[]
for (let i = 1; i < this.state.myData.lenght; i++) {
let ref =`myrefRow ${i}`
this[ref]= React.createRef()
const row = (
<tr ref={this[ref]}>
<td>
`myRow ${i}`
</td>
</tr>
)
trs.push(row)
}
this.setState({dynamicViews:trs})
}
clickHandler = ()=>{
//const scrollToView = this.inputRef.current.value
//That to select the value of the inputbox bt for demostrate the //example
value=`myrefRow ${30}`
this[value].current.scrollIntoView({ behavior: "smooth", block: "start" });
}
render(){
return(
<div style={{display:"flex", flexDirection:"column"}}>
<Button onClick={this.clickHandler}> Search</Button>
<input ref={this.inputRef}/>
<table>
<tbody>
{this.state.dynamicViews}
<tbody>
<table>
</div>
)
}
}
export default YourClass
那样滚动条就会滑到你要查找的行...
祝好运并希望它能帮助其他人。