在React中使用fullpagejs，如何在不重新渲染整个页面的情况下触发活动幻灯片上的功能

Question

在我的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;

Answer 1

来自docs：

只需将类'active'添加到要首先加载的部分和幻灯片中。

有条件地添加（f.e.使用getActiveSection()）'active'类名应解决重新渲染问题。

相同的方法/值可用于设置playing prop。

可能（我不知道/没有使用fullpage.js）你也可以使用回调（没有状态管理和不必要的渲染），f.e。 afterSlideLoad

Answer 2

Update

问题已在https://github.com/alvarotrigo/react-fullpage/issues/118修复。

版本0.1.15将修复它

---

您应该使用fullPage.js回调afterLoad或onLeave，可以在react-fullpage docs上提供的codesandbox中看到：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;