Reactjs 反应-从导航栏滚动到组件

我正在尝试在React中创建一个webapp，在加载页面时加载所有模块。。单击导航模块时，我想向下滚动至已选择的模块。 我有一个父模块，它有3个和其他。我做错了什么？我试着去安慰.log case:1，看看哪里出了问题，但这似乎也不起作用

App.js

class App extends Component {

  constructor(props){
     super(props);
     this.MyStory = React.createRef();
     this.Portfolio = React.createRef();
     ...
     this.scrollToContent = this.scrollToContent.bind(this);
   }

  scrollToContent(content) {
      switch(content) {
      case 1:
        this.MyStory.current.scrollIntoView({behavior: 'smooth'});
        break;
      case 2:
        this.Portfolio.current.scrollIntoView({behavior: 'smooth'});
    }

  }

  render() {
    return ( 

    <div className="App">
      <Nav scrollToContent={this.scrollToContent} />
      <MyStory scrollToTop={this.scrollToTop} ref={this.MyStory}/>
      <Portfolio scrollToTop={this.scrollToTop} ref={this.Portfolio}/>
      ...
    </div>

    );
  }

}

export default App;

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.MyStory=React.createRef（）；
this.Portfolio=React.createRef（）；
...
this.scrollToContent=this.scrollToContent.bind（this）；
}
scrollToContent（内容）{
交换机（内容）{
案例1：
this.MyStory.current.scrollIntoView（{behavior:'smooth'}）；
打破
案例2：
this.Portfolio.current.scrollIntoView（{behavior:'smooth'}）；
}
}
render（）{
报税表（
...
);
}
}
导出默认应用程序；

MyStory.js

const MyStory = React.forwardRef((props, ref) => {

        return (
        <div className="story_box" ref={ref}>
        <p> ....
        </p>
        </div>

        );
});

export default MyStory;

const MyStory=React.forwardRef（（props，ref）=>{
返回(
。。。。

);
});
导出默认MyStory；

Nav.js

...
class Nav extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: "slider",
        };      
    }

    onMenuClick = (event) => {
        if (this.state.id === "slider"){
            this.setState({id: "sliderOut"});
        }
        else (this.setState({id: "slider"}));
    }





    render () {
        return (
            <nav id="navigation" className={this.props.navStatus}>
            <div className="links">
            <a onClick={this.onMenuClick}>Menu</a>
                 <div id={this.state.id}>
                        <a id="myStory" onClick={this.scrollToContent}>My Story</a>
                        <a id="portfolio">Portfolio</a>
                        <a id="contact">Contact</a>
                </div>
            </div>
            </nav>

        );
        }
}

。。。
类Nav扩展组件{
建造师（道具）{
超级（道具）；
此.state={
id:“滑块”，
};      
}
onMenuClick=（事件）=>{
if（this.state.id==“滑块”）{
this.setState（{id:“sliderOut”}）；
}
else（this.setState（{id:“slider”}））；
}
渲染（）{
返回(
菜单
我的故事
文件夹
接触
);
}
}

---

导出默认导航

那么基本上我是如何解决的： 我已将导航移动到父应用程序，然后为每个组件分配了一个ref=。 App.js

。。。。
...
{scrollToComponent（this.MyStory，{offset:0，align:'top'，duration:1000}}>我的故事
...
{this.MyStory=MyStory；}}/>

---

当它加载和滚动时，所有内容都在一个页面上，绝对正常！！：）

我还尝试使用React Scroll to组件使其工作，但不知怎的，我被引用转发部分卡住了。

....
...

<a onClick={()=> {scrollToComponent(this.MyStory,{offset: 0, align: 'top', duration: 1000})}}>My Story</a>

...

<MyStory scrollToTop={this.scrollToTop} ref={(MyStory) => { this.MyStory = MyStory; }}/>