javascript - 如何在 React JS 中使用 jQuery 插件 "fullPage.js"

Question

自 4 小时以来，我一直在尝试让这个插件与 React 一起使用，但我没有成功。我确实搜索了整个网络，但我无法弄清楚。网络中有许多不好的和旧的方法。不过，React 官方文档中的这个链接很好。 https://reactjs.org/docs/integrating-with-other-libraries.html

另外，我尝试了这个https://github.com/subtirelumihail/react-fullpage 。我也无法让它工作。

我实现的最后一点是该插件正在工作，但是当我切换页面或转到上一页时，它停止工作。仅当您刷新页面时它才起作用。

我相信这不应该这么难。任何建议都将受到高度赞赏。谢谢。

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Link } from 'react-router-dom';
import $ from 'jquery';
// window.jQuery = $;
// require('jquery.fullpage.min');
// import 'jquery.fullpage.min';

class Login extends Component{
    constructor(){
        super();
    }

    // componentDidMount() {
    //     this.$el = $(this.el);
    //     this.$el.fullpage({
    //         sectionsColor : ['#42536A', '#e06870', '#1ca64c', 'lemonchiffon'],
    //         navigation: true,
    //         navigationPosition: 'left',
    //     });
    // }

    // componentWillUnmount() {
    //     this.$el.fullpage('destroy');
    // }

    renderTextField(field){...}

    renderPasswordField(field){...}

    onSubmit(values){...}

    render(){
        const { handleSubmit } = this.props;

        return(
            <div id="form-page">
                <header id="nav">
                    <Link to="/login" className="btn login-button mr10">Log In</Link>
                    <Link to="/signup" className="btn signup-button">Sign up</Link>
                </header>
                <div id="fullpage" ref={el => this.el = el}>
                    <div className="section">
                        <div id="form-container">
                            <form onSubmit={ handleSubmit(this.onSubmit.bind(this)) }>
                                <Field
                                    label="Email"
                                    name="email"
                                    component={ this.renderTextField }
                                />
                                <Field
                                    label="Password"
                                    name="password"
                                    component={ this.renderPasswordField }
                                />
                                <button type="submit" className="btn btn-brand">Log In</button>
                            </form>
                        </div>
                    </div>
                    <div className="section">Section 1</div>
                    <div className="section">Section 2</div>
                    <div className="section">Section 3</div>
                </div>
            </div>
        );
    }

}

export default reduxForm({
    form: 'loginForm',
})(Login);

通常这是您声明它的方式:

$(document).ready(function() {
    $('#fullpage').fullpage({
        sectionsColor : ['#42536A', '#e06870', '#1ca64c', 'lemonchiffon'],
        navigation: true,
        navigationPosition: 'left',
    });
});

Answer 1

现在有一个针对 fullpage.js 的官方 React 组件。

您可以在这里查看: https://alvarotrigo.com/react-fullpage/

Github 仓库:https://github.com/alvarotrigo/react-fullpage