如何在useeffect中使用scrollintoview（无法读取null的属性（读取'scrollIntoView'））答案

【问题标题】：How to use scrollintoview inside useeffect ( Cannot read properties of null (reading 'scrollIntoView') )如何在useeffect中使用scrollintoview（无法读取null的属性（读取'scrollIntoView'））
【发布时间】：2021-12-02 05:51:24
【问题描述】：

我需要从头开始设置我的网页。所以我写了这样的代码。

function BasicDetails() {

    React.useEffect(()=>{
        scrollView();
    }, []);

    function scrollView() {
        document.getElementById('main-root').scrollIntoView({behavior: 'smooth'});
    }
    return (
        <Nav>
            <div id="main-root" style={{scrollBehavior: 'smooth'}}>
                <div>
                    <Header pageTitle={'Shop Settings'}/>
                    <Button
                        onClick={saveBasicDetails}
                        variant="contained"
                        id='save'
                        className={classes.saveButton}>
                        SAVE
                    </Button>
                </div>

                <BasicDetailsData style={{scrollBehavior: 'smooth'}} ref={childRef}/>
            </div>
        </Nav>
    );
}

但是当我尝试运行我的代码时，我遇到 错误 TypeError: Cannot read properties of null (reading 'scrollIntoView') 所以我尝试了很多次，但找不到错误。我是反应的新学生，所以。我对此了解不多。任何人都可以帮助我...我真的需要您的帮助..谢谢。

【问题讨论】：

您必须在 React 中使用 refs 才能检索对 DOM 元素的引用，而不是直接尝试调用甚至未渲染的元素 - document.getElementById('main-root' ) - 它不存在于 DOM 元素中，因为您首先在 Virtual DOM 中制作它。 reactjs.org/docs/refs-and-the-dom.html#gatsby-focus-wrapper
除了您应该使用 Rect ref 而不是查询元素的 DOM 之外，我无法在使用 document.getElementById('main-root') 的精简代码框中重现该问题，它不会引发错误。您能否尝试创建一个 running 代码框来重现我们可以实时检查和调试的问题？

标签： javascript reactjs react-hooks

【解决方案1】：

我试过了，这就是我的工作方式：

function scrollView() {
    const mainRoot = document.getElementById("main-root");
    mainRoot.scrollIntoView({ behavior: "smooth" });
  }

【讨论】：

非常感谢..✌️❤️