Использование fullpagejs в React, как вызвать функцию на активном слайде без повторного рендеринга всей страницы - PullRequest
Новая
       10

Использование fullpagejs в React, как вызвать функцию на активном слайде без повторного рендеринга всей страницы

1 голос
/ 27 апреля 2019

В моем приложении React я использую fullpage.js для рендеринга двух слайдов, содержащих два разных компонента.Я хочу запустить функцию внутри одного из них, только когда это активный слайд.Я попробовал приведенный ниже код, но после изменения состояния вся ReactFullpage перерисовывается, и первый слайд снова становится активным, поэтому я в основном застрял в цикле.

У меня вопрос, как я могу это сделать?запустить функцию внутри компонента <Player />, только если это активный слайд? 

import React from "react";
import ReactFullpage from "@fullpage/react-fullpage";
import AlbumInfo from './AlbumInfo';
import Player from './Player';

class Album extends React.Component {

    constructor(props){
        super(props);

        this.state={
            playing: false
        }
    }

    _initPlayer = (currentIndex, nextIndex) => {
        if(nextIndex.index === 1) {
            this.setState({playing:true})
        }
    }

    render() {

        return (
            <ReactFullpage
                licenseKey='xxxxxxxx-xxxxxxxx-xxxxxxxx-xxxxxxxx'
                sectionsColor={["#000000"]}
                afterLoad={this._initPlayer}
                render={({ state, fullpageApi }) => {
                    return (
                        <div id="fullpage-wrapper">
                            <div className="section">
                                <AlbumInfo />
                            </div>
                            <div className="section">
                                <Player playing={this.state.playing} />
                            </div>
                        </div>
                    );
                }}
            />
            );
        }
    }

export default Album;

Ответы [ 2 ]

0 голосов
/ 27 апреля 2019

Обновление

Проблема была исправлена ​​на https://github.com/alvarotrigo/react-fullpage/issues/118.

В версии 0.1.15 исправлено

Вы должны использовать fullPageОбратные вызовы .js afterLoad или onLeave, как это видно из кодов и графических окон, представленных в документах о полных реакциях: https://codesandbox.io/s/m34yq5q0qx

/* eslint-disable import/no-extraneous-dependencies */
import React from "react";
import ReactDOM from "react-dom";
import "fullpage.js/vendors/scrolloverflow"; // Optional. When using scrollOverflow:true
import ReactFullpage from "@fullpage/react-fullpage";

import "./styles.css";

class FullpageWrapper extends React.Component {
  onLeave(origin, destination, direction) {
    console.log("Leaving section " + origin.index);
  }
  afterLoad(origin, destination, direction) {
    console.log("After load: " + destination.index);
  }
  render() {
    return (
      <ReactFullpage
        anchors={["firstPage", "secondPage", "thirdPage"]}
        sectionsColor={["#282c34", "#ff5f45", "#0798ec"]}
        scrollOverflow={true}
        onLeave={this.onLeave.bind(this)}
        afterLoad={this.afterLoad.bind(this)}
        render={({ state, fullpageApi }) => {
          return (
            <div id="fullpage-wrapper">
              <div className="section section1">
                <h3>Section 1</h3>
                <button onClick={() => fullpageApi.moveSectionDown()}>
                  Move down
                </button>
              </div>
              <div className="section">
                <div className="slide">
                  <h3>Slide 2.1</h3>
                </div>
                <div className="slide">
                  <h3>Slide 2.2</h3>
                </div>
                <div className="slide">
                  <h3>Slide 2.3</h3>
                </div>
              </div>
              <div className="section">
                <h3>Section 3</h3>
              </div>
            </div>
          );
        }}
      />
    );
  }
}

ReactDOM.render(<FullpageWrapper />, document.getElementById("react-root"));

export default FullpageWrapper;
0 голосов
/ 27 апреля 2019

Из документов:

просто добавьте класс 'active' в раздел и слайд, который вы хотите загрузить первым.

добавление условно (например, с использованием getActiveSection()) 'active' имя класса должно решить проблему повторного рендеринга.

Этот же метод / значение можно использовать для настройки playing prop.

Возможно (я не знаю / не использовал fullpage.js), вы также можете использовать обратные вызовы (без управления состоянием и ненужного рендеринга), например afterSlideLoad

...