滚动到 x 时，react-scroll scrollToBottom 不起作用

Question

我正在使用此处的 react-scroll npm 包：https://www.npmjs.com/package/react-scroll

按照他们的示例，我已经设置了我的代码，我可以让 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

Answer 1

如果您想保留此语法，可以使用 create-react-class。

运行 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>

参考：https://reactjs.org/docs/react-without-es6.html

或者，您可以将 Header 组件转换为扩展 React.Component 的 class 并遵循 JavaScript class 的语法。

滚动到 x 时，react-scroll scrollToBottom 不起作用

react-scroll scrollToBottom not working when scroll to x does work

reactjs

react-scroll