Javascript 自动转到在React虚拟Dom中创建的div元素

我的网页使用React组件。在其一个组件div元素的渲染函数处，该元素如下所示：

<div id='myid'>
  {/* ... */}
</div>

{/* ... */}

正在使用。重新加载页面后，我们需要转到其中一个div。例如，在重新加载该页面后，我们可能需要自动转到id等于

myid

的

元素。请注意，

位于React虚拟DOM中，因此像

document.getElementById

这样的函数可能无法工作（就像我所遇到的那样）。这可能吗？

安装组件时，

和

id

将在文档中结束，因此您可以在

componentDidMount

挂钩中滚动到文档中

示例

class App extends React.Component {
  componentDidMount() {
    document.getElementById("myid").scrollIntoView();
  }
  render() {
    return (
      <div>
        <div style={{ height: 1000 }}>Hello CodeSandbox</div>
        <div style={{ height: 1000 }} id="myid">
          Scroll here
        </div>
      </div>
    );
  }
}

类应用程序扩展了React.Component{
componentDidMount（）{
document.getElementById（“myid”）.scrollIntoView（）；
}
render（）{
返回(
你好，代码沙盒
滚动此处
);
}
}

安装组件时，

和

id

将在文档中结束，因此您可以在

componentDidMount

挂钩中滚动到文档中

示例

class App extends React.Component {
  componentDidMount() {
    document.getElementById("myid").scrollIntoView();
  }
  render() {
    return (
      <div>
        <div style={{ height: 1000 }}>Hello CodeSandbox</div>
        <div style={{ height: 1000 }} id="myid">
          Scroll here
        </div>
      </div>
    );
  }
}

类应用程序扩展了React.Component{
componentDidMount（）{
document.getElementById（“myid”）.scrollIntoView（）；
}
render（）{
返回(
你好，代码沙盒
滚动此处
);
}
}

您仍然可以使用findDOMNode获取元素

const div=ReactDOM.findDOMNode（this.refs.mydiv）

然后在渲染函数中


最后

window.scrollTo（0，div.offsetTop）
您仍然可以使用findDOMNode获取元素

const div=ReactDOM.findDOMNode（this.refs.mydiv）

然后在渲染函数中


最后

window.scrollTo（0，div.offsetTop）
如果元素由react呈现，则应使用
ref
使元素调用
scrollIntoView（）
：

class MyComponent extends Component {
    ref = elem => elem.scrollIntoView();

    render() {
        return (
            <div ref={this.ref}>{/* ... */}</div>
        );
    }
}

类MyComponent扩展组件{
ref=elem=>elem.scrollIntoView（）；
render（）{
返回(
{/* ... */}
);
}
}

使用
getElementById（）
或
React.findDOMNode
也可以工作，但存在一个问题，即您需要知道组件是否已安装。如果使用
ref
在组件内部进行滚动（推荐使用该选项），则是最佳解决方案。
如果元素由react呈现，则应使用
ref
使元素调用
scrollIntoView（）
：

class MyComponent extends Component {
    ref = elem => elem.scrollIntoView();

    render() {
        return (
            <div ref={this.ref}>{/* ... */}</div>
        );
    }
}

类MyComponent扩展组件{
ref=elem=>elem.scrollIntoView（）；
render（）{
返回(
{/* ... */}
);
}
}

使用
getElementById（）
或
React.findDOMNode
也可以工作，但存在一个问题，即您需要知道组件是否已安装。如果您使用
ref
在组件内部滚动（推荐使用）是最好的解决方案。
问题是，我们在同一虚拟dom页面中有多个div，如上文所述，id='myid'，我们希望在重新加载后，有时去其中一家，有时去另一家。@JoseCabreraZuniga我理解。我更新了答案。这只是一个示例，但是您可以按照自己的喜好处理拾取
id
的逻辑。您应该使用react
ref
，而不是在dom中搜索元素。DOM查询在处理反应时几乎从来没有必要。我开始考虑这个例子后面的回调。Thx@trixn是的，我的原始答案使用了
ref
，但这不适合Jose的用例。问题是，我们在同一虚拟dom页面中有几个像上面提到的id='myid'的div，我们希望在重新加载后，有时转到其中一个，有时转到另一个。@JoseCabreraZuniga我理解。我更新了答案。这只是一个示例，但是您可以按照自己的喜好处理拾取
id
的逻辑。您应该使用react
ref
，而不是在dom中搜索元素。DOM查询在处理反应时几乎从来没有必要。我开始考虑这个例子后面的回调。Thx@trixn是的，我的原始答案使用了
ref
，但这不符合Jose的用例。