如何解决React.js useRef / createRef当前始终为null滚动
我在将引用分配给div时遇到问题。我想滚动到div以供参考,但是.current的值始终为null / undefined。
import React,{ Component,useRef,useEffect } from 'react';
import { Route,BrowserRouter,Redirect } from 'react-router-dom';
class App extends Component {
myRef = React.createRef();
componentDidMount() {
{ this.myRef ? this.scrollToRef() : null }
}
scrollToRef = () => {
if(this.myRef.current !== null)
// window.scrollTo(0,this.myRef.current.offsetTop);
window.scrollTo({ behavior: 'smooth',top: this.myRef.current.offsetTop })
}
render() {
return (
<Aux>
<BrowserRouter>
<Route
path="/contact"
render={() => (
<Main
page={<HomePage />}
tools={<Toolbar />}
content={
<Contact ref={this.myRef} />
}
/>
)}
/>
</BrowserRouter>
</Aux>
);
}
}
和内部联系人:
import React,{ useRef,Component,createRef } from 'react';
import classes from './contact.module.css';
const contact = React.forwardRef((props,ref) => {
const newRef = useRef();
return <div className={classes.Contact} ref={ref}>{props.children}</div>
};
我尝试了很多版本,.current始终为空。
反应:16.13.1
单击工具栏上的“联系人”时,我想滚动到<div className={classes.Contact} ref={ref}>
。
编辑:
我目前在scrollToRef()
处有参考,但是window.scrollTo()
仍然无法正常工作。<Aux>
可能会伤害某些东西吗?也许问题在于重新渲染DOM?早些时候,我尝试使用缓和效果,但是它也无法正常工作。当我在调试过程中取消选中复选框时,它会运行,但是当我打开新的重叠窗口时,它不会触发。
解决方法
您将变量setRef
传递给函数(newRef)
,但是在函数定义中,您将(props)
写为变量。因此您需要将功能更改为:
setReference = (newRef) => {
this.setState({myRef: newRef})
}
我希望它会有所帮助:)
顺便说一句,您最好使用forwardRef
-https://reactjs.org/docs/forwarding-refs.html
我建议也使用forwardRef
,而不是直接在jsx中调用函数,而应使用生命周期挂钩,例如useEffect
和componentDidUpdate
这是使用forwardRef的代码,您可以看到,在这种情况下,这是一种简单的设置方法。
const Contact = React.forwardRef((props,ref) => {
return (
<div className={'Contact'} ref={ref}>
{props.children}
</div>
);
});
class App extends React.Component {
contactRef = React.createRef();
state = {};
scrollToRef = () => {
if (this.contactRef.current !== null)
// window.scrollTo(0,this.myRef.current.offsetTop);
window.scrollTo({
behavior: 'smooth',top: this.contactRef.current.offsetTop,});
console.log(this.contactRef.current);
};
render() {
return (
<div>
<Contact ref={this.contactRef} />
<button onClick={this.scrollToRef}>Scroll</button>
</div>
);
}
}
ReactDOM.render(<App />,document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root" />
,
好的,问题已解决。
我更改了componentDidMount:
componentDidMount() {
// { this.myRef ? this.scrollToRef() : null }
this.myRef ? this.myRef.current.scrollIntoView({
behavior: 'smooth',block: 'center',inline: 'center'
})
: null
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。