0

我在这里使用 react-scroll npm 包：https ://www.npmjs.com/package/react-scroll

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

我的代码设置也与他们的示例略有不同，this.scrollToBottom抛出错误也是如此React.createClass。

页眉.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
4

1 回答 1

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>

编辑 Still-brook-qhgmo

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

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

于 2020-09-05T05:22:55.507 回答