Question

从4个小时以来，我一直试图让这个插件与React一起工作，但我没有运气。我确实搜索了整个网络，但我无法弄明白。有许多不好的＆amp;网络中的旧方法。虽然，React的官方文档中的这个链接是好的。 https://reactjs.org/docs/integrating-with-other-libraries.html

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

我已经实现的最后一点是该插件正在运行但是当我切换页面或转到上一页时，它停止工作。它仅在刷新页面时有效。

我相信这不应该这么难。任何建议都非常感谢。感谢。

def is_even_line(line):
    return line[0] == '2'

通常这是你声明它的方式：

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);

Answer 1

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

您可以在此处查看： https://alvarotrigo.com/react-fullpage/

Github存储库：https://github.com/alvarotrigo/react-fullpage

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

1 个答案: