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

Question

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

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