React 16.8 +,函数式组件
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>
</>
)
}
点击此处以获取有关StackBlitz的完整演示
React 16.3 +,类组件
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()
}
类组件 - 引用回调
class ReadyToScroll extends Component {
render() {
return <div ref={ (ref) => this.myRef=ref }>Element to scroll to</div>
}
executeScroll = () => this.myRef.scrollIntoView()
}
不要使用字符串引用。
字符串引用会影响性能,不可组合,并且正在逐渐被淘汰(2018年8月)。
字符串引用存在一些问题,被认为是遗留代码,将很可能在未来的版本中被移除。[React官方文档]
资源1资源2
可选:平滑滚动动画
html {
scroll-behavior: smooth;
}
传递 ref 给子组件
我们希望将 ref 附加到一个 DOM 元素上,而不是一个 React 组件上。因此,在将其传递给子组件时,我们不能将 prop 命名为 ref。
const MyComponent = () => {
const myRef = useRef(null)
return <ChildComp refProp={myRef}></ChildComp>
}
然后将ref prop附加到DOM元素。
const ChildComp = (props) => {
return <div ref={props.refProp} />
}