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

Question

4 小时以来，我一直在尝试让这个插件与 React 一起工作，但我没有成功。我确实搜索了整个网络，但我无法弄清楚。网络中有许多不好的和旧的方法。虽然，这个来自 React 官方文档的 link 很好。 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

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

How to use jQuery plugin "fullPage.js" in React JS

javascript

jquery

reactjs

fullpage.js