Reactjs 在React.js中设置状态后自动滚动到渲染元素

假设我在页面顶部的列表项上有一些setState声明，如下所示：

<DropdownMenu >
    <DropdownItem className="channel-setting__btn"
      onClick={() => this.setState({ facebookFields: true, youtubeFields: true })}>All</DropdownItem>

    <DropdownItem
      className="channel-setting__btn"
      onClick={() => this.setState({ facebookFields: true, youtubeFields: false })}>Facebook
    </DropdownItem>

    <DropdownItem
      className="channel-setting__btn"
      onClick={() => this.setState({ facebookFields: false, youtubeFields: true })}>Youtube
    </DropdownItem>

</DropdownMenu>

this.setState（{facebookFields:true，youtubeFields:true}）}>All
this.setState（{facebookFields:true，youtubeFields:false}}>Facebook
this.setState（{facebookFields:false，youtubeFields:true}}>Youtube

---

当我点击DropDownItem时，无论DOM元素呈现了什么，页面都会自动平滑地滚动到该部分或元素在页面上呈现的位置，在这个cas中，facebook和youtube的元素是不同的形式，它们将呈现在页面的最末端，并且离页面的末尾太近。

有几种方法可以做到这一点： 其中一种方法是监听componentWillReceiveProps生命周期事件中的状态更改，如下所示：

componentWillReceiveProps(nextProp, nextState){
   //considering only first case here
   if (nextState.facebookFields== true && youtubeFields ==true){
      setTimeout(function(){
         let objControl=document.getElementById("theIdOfTheElementToBeRendered");
         objControl.scrollIntoView();
      },500)
   }
}

正如您在上面看到的，我使用了setTimeout，因为此时未呈现元素。一旦渲染发生，回调函数将被回调（我假设延迟500毫秒；您可以自己决定）

我使用了普通的旧JS滚动到元素。确保元素具有唯一的id

---

希望这个答案对你有帮助。我愿意讨论。注意。

您可以在

componentdiddupdate

之后使用

scrollIntoView

函数，该函数在

render

之后立即调用

下面是一个使用要滚动到的元素ID的版本。您还可以存储元素的

refs

，并按照建议的方式执行。（无论如何，您都不会在中修改DOM）

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
媒体：“”
}
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
这是我的国家({
媒体：event.target.value
});
}
componentDidUpdate（）{
常量元素=document.getElementById（this.state.media）；
元素。scrollIntoView（{behavior:'smooth'}）；
}
render（）{
返回(
脸谱网
Youtube
facebook
youtube
);
}
}
render（，document.getElementById（“根”））
。社交媒体{
高度：100vh；
}
#脸谱网{
边际上限：100vh；
}

查看，即使您不需要该软件包，您也会了解如何实现动画滚动。这是滚动的实现方式。正是我想要的。不知道react.hi中的“ComponentDidUpdate”方法，我现在有另一个问题。每当我单击toggle按钮时，就会调用另一个方法
toggleSchedule=（value）=>{this.setState（{scheduling:！value}）；}
现在当我单击toggle按钮时，页面再次滚动，我想这是因为调用componentDidUpdate是因为toogle按钮的视图发生了变化。我在componentDidUpdate（prevState）中像这样尝试了prevState，控制台记录了它，这就是我在prevState中得到的-->
{match:{…}，位置：{…}，历史：{…}，staticContext:undefined}
componentDidUpdate
接收
prevState
作为参数，您可以使用当前状态交叉检查，以确定状态更新是否由下拉菜单触发。这是我尝试执行的操作，但当是console.log（prevState）时，我得到以下信息：
{match:{…}，位置：{…}，历史：{…}，staticContext:undefined}
这看起来像是路由器的东西。@sushmitgur这可能是因为您正在检查
prevProps
而不是
prevState
prevState
是
componentDidUpdate