Reactjs 使用带有react滚动的react burger菜单（函数组件到类组件）

我已经在我的代码中实现了react burger菜单：以及react smooth scroll。两者都可以工作，但我遇到的麻烦是，当尝试将smooth scroll的工作代码添加到hamburger菜单组件中时，我不知道语法需要是什么样的，因为smooth scroll使用的是函数组件，而hamburger菜单组件使用的是类组件

我正在尝试集成此工作代码：

import React from 'react'
import Example from '../hamburger-menu/hamburger-menu';
import { Link, DirectLink, Element, Events, animateScroll as scroll, scrollSpy, scroller } from 'react-scroll'

const Header = () => ({
    componentDidMount: function() {
        Events.scrollEvent.register('begin', function(to, element) {
          console.log('begin', arguments);
        });
     
        Events.scrollEvent.register('end', function(to, element) {
          console.log('end', arguments);
        });
     
        scrollSpy.update();
      },
      componentWillUnmount: function() {
        Events.scrollEvent.remove('begin');
        Events.scrollEvent.remove('end');
      },

      scrollToBottom: function() {
        scroll.scrollToBottom();
      },
      handleSetActive: function(to) {
        console.log(to);
      },

      render: function() {
    return (
        <div className="header">

             <Link to="Contact" spy={true} smooth={true} offset={-100} duration={1400}><p className="header-mainnav-contact">Contact</p></Link>  
            </span>
           
        </div>
    )
      }
})

export default Header

从“React”导入React
从“../hamburger menu/hamburger menu”导入示例；
从“反应滚动”导入{Link，DirectLink，Element，Events，animateScroll as scroll，scrollSpy，scroller}
常量头=（）=>({
componentDidMount:function（）{
Events.scrollEvent.register（'begin'，函数（to，元素）{
log（'begin'，参数）；
});
Events.scrollEvent.register（'end'，函数（to，元素）{
log（'end'，参数）；
});
scrollSpy.update（）；
},
componentWillUnmount:function（）{
Events.scrollEvent.remove（'begin'）；
Events.scrollEvent.remove（'end'）；
},
scrollToBottom:function（）{
scroll.scrollToBottom（）；
},
handleSetActive:功能（到）{
console.log（to）；
},
render:function（）{
返回(
联系人
)
}
})
导出默认标题

在该组件中：

import React from "react"
import { slide as Menu } from 'react-burger-menu'
import { Link, DirectLink, Element, Events, animateScroll as scroll, scrollSpy, scroller } from 'react-scroll'
 
class Example extends React.Component {
  showSettings (event) {
    event.preventDefault();

  }


    
 
  render() {
    return ( 
      <Menu styles={styles} className="menu">
        <div className="menu-div">
          <Link to="Contact" spy={true} smooth={true} offset={-100} duration={1400}><a id="contact" className="menu-div-item" href="Contact">Contact</a></Link>
        </div>
      </Menu >
    );
  }
}

export default Example

从“React”导入React
从“反应汉堡菜单”导入{幻灯片作为菜单}
从“反应滚动”导入{Link，DirectLink，Element，Events，animateScroll as scroll，scrollSpy，scroller}
类示例扩展了React.Component{
showSettings（活动）{
event.preventDefault（）；
}
render（）{
报税表（
);
}
}
导出默认示例

我已尝试通过handleSetActive添加componentDidMount，并尝试将它们从

componentDidMount:function（）{

更改为

componentDidMount（）{

等，但尚未找到正确的方法