Reactjs 当滚动到x时，反应滚动到底部不工作

我在这里使用的是react scroll npm软件包：

按照他们的例子，我已经设置了我的代码，我可以让onClick函数用于滚动特定距离，但是scrollToBottom仍然不起作用

我的代码设置也与他们的示例稍有不同，如

this.scrollToBottom

抛出错误，

React.createClass

Header.js

import React from 'react'
import './Header.scss'
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');
  },
  scrollToTop: function() {
    scroll.scrollToTop();
  },
  scrollToBottom: function() {
    scroll.scrollToBottom();
  },
  handleSetActive: function(to) {
    console.log(to);
  },

  render: function() {
    return (
        <div className="Header">
            <div className="Header-div1">
                <h3 className="Header-div1__name">Caleb Middleton</h3>
            </div>
            <div className="Header-div2">
                <p className="Header-div2__About margin-right" onClick={() => scroll.scrollToBottom}>About</p>
                <p className="Header-div2__Skills margin-right" onClick={() => scroll.scrollTo(500)}>Skills</p>
                <p className="Header-div2__Projects margin-right" onClick={() => scroll.scrollTo(900)}>Projects</p>
            </div>
        </div>
    )
}
})

export default Header

从“React”导入React
导入“./Header.scss”
从“反应滚动”导入{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'）；
},
scrollToTop:函数（）{
scroll.scrollToTop（）；
},
scrollToBottom:function（）{
scroll.scrollToBottom（）；
},
handleSetActive:功能（到）{
console.log（to）；
},
render:function（）{
返回(
卡莱布·米德尔顿
scroll.scrollToBottom}>About
scroll.scrollTo（500）}>Skills
scroll.scrollTo（900）}>Projects
)
}
})
导出默认标题

如果要保留此语法，可以使用

运行

npm i create react class

并将其包含在项目中：

const createReactClass = require('create-react-class');

const Header = createReactClass({
  componentDidMount: function () {
    ...

至于

scrollToBottom

问题，目前您只是传递一个函数，而不是执行它。按如下方式重构它：

<p className="Header-div2__About margin-right" onClick={() => scroll.scrollToBottom()}>About</p>

scroll.scrollToBottom（）}>关于

参考：

---

或者，您可以将

标题
组件转换为扩展并遵循JavaScript类语法的类