如何在反应中使用/公开 vivus.js 方法

Question

我正在为 vivus.js 库使用 react 组件，但不知道如何使用它的方法，例如我想在幻灯片更改时调用 myVivus.play()，但不确定如何。我只是在学习反应，因为我知道我需要公开组件的方法才能在渲染中使用它，但到目前为止我所有的尝试都没有成功。任何帮助深表感谢！谢谢。

import React from 'react';
import ReactVivus from 'react-vivus';
import ReactFullpage from '@fullpage/react-fullpage'
import Svg1 from './example.svg';
import Svg2 from './example2.svg';


const Anim1 = () => (
  <ReactVivus
    id="anim1"
    option={{
      file: Svg1,
      animTimingFunction: 'EASE',
      type: 'oneByOne',
      onReady: console.log
    }}
    callback={console.log}
  />
);

const Anim2 = () => (
  <ReactVivus
    id="anim1"
    option={{
      file: Svg2,
      animTimingFunction: 'EASE',
      type: 'oneByOne',
      onReady: console.log
    }}
    callback={console.log}
  />
);


const FullpageWrapper = fullpageProps => (
  <div>
  <SEO title="Home" />
  <Menu>
    <MenuContainer>Logo</MenuContainer>
  </Menu>
  <ReactFullpage
    {...fullpageProps}

    //fullpage options
    licenseKey = {'***'}
    navigation
    anchors={['intro', 'reasonOne', 'reasonTwo']}
    sectionsColor={['#4e5c9e', '#d3d7f2', '#F5F5F6']}

    render={({ state, fullpageApi }) => {


      return (
        <div id="fullpage-wrapper">
          <div className="section section1 light">
            <SlideWrapper>
              <TextBlock>
                <SlideHeader>Header 1</SlideHeader>
                <SlideDescription>Description text 1</SlideDescription>
              </TextBlock>

              <AnimationBlock>
                <Anim1/>
                <button onClick={() => this.play()} >Play</button>
              </AnimationBlock>
            </SlideWrapper>
          </div>

          <div className="section section2">
            <SlideWrapper>

              <AnimationBlock>
               <Anim2/>
              </AnimationBlock>

              <TextBlock>
                <SlideHeader>Header 2</SlideHeader>
                <SlideDescription>>Description text 2</SlideDescription>
              </TextBlock>

            </SlideWrapper>
          </div>

          ...


        </div>

      );
    }}
  />

  </div>

);


export default FullpageWrapper;

Answer 1

好的，所以问题是 react-vivus 是一个围绕 vivus.js 的小包装器，但并不完整。 该库的创建者不允许任何方式调用您想要调用的来自 vivus.js 的方法，例如 play。顺便提一下这个here的问题。

也就是说，你想要的可以用一些棘手的代码来完成，就像这样：

import React, {useState} from 'react';
import ReactVivus from 'react-vivus';
import svg from './example.svg';

const MyVivus = () => (
  <ReactVivus
    id="foo"
    option={{
      file: svg,
      animTimingFunction: 'EASE',
      type: 'oneByOne',
      onReady: console.log
    }}
    style={{ height: '100px', width: '100px' }}
    callback={console.log}
  />
);

function App() {
  const [show, setShow] = useState(true)

  const handleReset = () => {
    setShow(false) // unmounting here
    setInterval(() => setShow(true), 0) // re-mounting a fraction of second later
  } 

  return (
    <React.Fragment>
      {show ? <MyVivus/> : null}
      <button onClick={handleReset}>reset</button>
    </React.Fragment>
  );
}

发生的情况是，我们移除了组件并很快将其放回原处，因此动画再次触发。

将其集成到您的代码中：

const FullpageWrapper = fullpageProps => {
  const [shown, setShown] = useState(true)

  const handlePlay = () => {
    setShown(false)
    setInterval(() => setShown(true), 0)
  }

  return (
    <div>
      <SEO title="Home" />
      <Menu>
        <MenuContainer>Logo</MenuContainer>
      </Menu>
      <ReactFullpage
        {...fullpageProps}
        licenseKey = {'***'}
        navigation
        anchors={['intro', 'reasonOne', 'reasonTwo']}
        sectionsColor={['#4e5c9e', '#d3d7f2', '#F5F5F6']}
        render={({ state, fullpageApi }) => (
          <div id="fullpage-wrapper">
            <div className="section section1 light">
              <SlideWrapper>
                <TextBlock>
                  <SlideHeader>Header 1</SlideHeader>
                  <SlideDescription>Description text 1</SlideDescription>
                </TextBlock>
                <AnimationBlock>
                  {shown ? <Anim1/> : null}
                  <button onClick={handlePlay}>Play</button>
                </AnimationBlock>
              </SlideWrapper>
            </div>
            <div className="section section2">
              <SlideWrapper>
                <AnimationBlock>
                  <Anim2/>
                </AnimationBlock>
                <TextBlock>
                <SlideHeader>Header 2</SlideHeader>
                <SlideDescription>>Description text 2</SlideDescription>
              </TextBlock>
            </SlideWrapper>
          </div>
        </div>
      )}
    />
  </div>
  )
}