Возникли проблемы с преобразованием HTML в код React, указанный c. Я использую `@ pqina / flip`? - PullRequest
Новая
       11

Возникли проблемы с преобразованием HTML в код React, указанный c. Я использую `@ pqina / flip`?

0 голосов
/ 27 мая 2020

Я использую https://github.com/pqina/flip и хочу реализовать метод Tick.count.down() с помощью React. В примере нет кода React c, который приведен в примере, а также автор завален, поэтому подумал, что попрошу здесь некоторых экспертов по React.

Я клонировал вышеуказанное репо и заменил https://github.com/pqina/flip/tree/master/example/index.html содержимое со следующим кодом.

У меня следующее HTML отлично работает: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Count Down</title>

        <link rel="stylesheet" href="../dist/core/tick.core.min.css" />
    </head>
    <body>
        <style>
            .tick {
                font-size: 2rem;
            }
        </style>

        <p>Countdown from 10</p>
        <div class="tick" data-did-init="startNumericCountdown">
            <span data-view="text"></span>
        </div>

        <script>
            function startNumericCountdown(tick) {
                console.log(`start numeric countdown...`)
                var counter = Tick.count.down(10, 'seconds')
                counter.onupdate = function (value) {
                    tick.value = value
                }
                counter.onended = function () {
                    console.log(`countdown over ?`)
                }
            }
        </script>

        <script src="../dist/core/tick.core.kickstart.min.js"></script>
    </body>
</html>

Проблема возникает, когда я пытаюсь преобразовать его в React. В настоящее время у меня есть следующий код: 

import React, { useRef, useEffect } from "react";
import Tick from "@pqina/flip";
import "@pqina/flip/dist/flip.min.css";

export const FlipDate = ({ value }) => {
  const divRef = useRef();
  const tickRef = useRef();

  useEffect(() => {
    const didInit = tick => {
      console.log("didInit");

      console.log({ tick });
      tickRef.current = tick;
    };

    const currDiv = divRef.current;
    const tickValue = tickRef.current;
    Tick.DOM.create(currDiv, {
      value: Tick.count.down(10, 'seconds'),
      didInit
    });
    // divRef.current = Tick.count.down(10, 'seconds');

    return () => Tick.DOM.destroy(tickValue);
  });

  useEffect(() => {
    console.log({ tickRef });
    if (tickRef.current) {
      console.log({ divRef });
      tickRef.current.value = value;
    }
  }, [value]);

  return (
    <div ref={divRef} className="tick">
      <div data-repeat="true">
        <span data-view="flip">Tick</span>
      </div>
    </div>
  );
};

Это не работает должным образом. У меня работает библиотека basi c flip, как вы можете видеть в моей демонстрации: https://codesandbox.io/s/react-flip-countdown-timer-8tin3?file= / src / App. js

3 файлов - это тот же код: 1 с использованием компонента класса Flip.js, 2 с использованием хуков Flipr.js и Flippen.js.

Я хочу, чтобы FlipDate.js работал. Он должен отсчитывать от 10 секунд до 0 секунд. Пытался сделать это на прошлой неделе, но не мог понять это. Любая помощь приветствуется ?

Примечание: https://github.com/pqina/flip использует https://github.com/pqina/tick под капотом.

1 Ответ

0 голосов
/ 27 мая 2020

Я разместил тот же вопрос на Reddit по адресу / r / reactjs и нашел там ответ. Вот рабочее решение: 

import React, { useRef, useEffect, useState } from "react";
import Tick from "@pqina/flip";
import "@pqina/flip/dist/flip.min.css";

export const WorkingFlipDate = ({ value }) => {
  const divRef = useRef();
  const tickRef = useRef();

  const [tickValue, setTickValue] = useState(value);

  // Make the Tick instance and store it in the refs
  useEffect(() => {
    const didInit = tick => {
      tickRef.current = tick;
    };

    const currDiv = divRef.current;
    const tickValue = tickRef.current;
    Tick.DOM.create(currDiv, {
      value,
      didInit
    });
    return () => Tick.DOM.destroy(tickValue);
  }, [value]);

  // Start the Tick.down process
  useEffect(() => {
    const counter = Tick.count.down(value, {
      format: ["d", "h", "m", "s"]
    });

    // When the counter updates, update React's state value
    counter.onupdate = function(value) {
      setTickValue(value);
    };

    // TODO: I don't know how to destroy this
    return () => {
      counter.onupdate = () => {};
    };
  }, [value]);

  // When the tickValue is updated, update the Tick.DOM element
  useEffect(() => {
    if (tickRef.current) {
      tickRef.current.value = tickValue;
    }
  }, [tickValue]);

  return (
    <div ref={divRef} className="tick">
      <div data-repeat="true">
        <span data-view="flip">Tick</span>
      </div>
    </div>
  );
};
...