Как вы конвертируете этот JSX в Hyperstack? - PullRequest
Новая
       23

Как вы конвертируете этот JSX в Hyperstack?

1 голос
/ 06 мая 2019

Как бы вы преобразовали этот JSX в компонент Hyperstack? 

const Stopwatch = () => (
  <ReactStopwatch
    seconds={0}
    minutes={0}
    hours={0}
    limit="00:00:10"
    onChange={({ hours, minutes, seconds }) => {
      // do something
    }}
    onCallback={() => console.log('Finish')}
    render={({ formatted, hours, minutes, seconds }) => {
      return (
        <div>
          <p>
            Formatted: { formatted }
          </p>
          <p>
            Hours: { hours }
          </p>
          <p>
            Minutes: { minutes }
          </p>
          <p>
            Seconds: { seconds }
          </p>
        </div>
      );
    }}
   />
);

Этот синтаксис render={({ formatted, hours, minutes, seconds }) является новым для меня. Это реквизит?

Я пытаюсь использовать этот модуль NPM:

https://www.npmjs.com/package/react-stopwatch

1 Ответ

2 голосов
/ 06 мая 2019

Опора render предоставляет функциональный компонент. Функциональный компонент - это функция, такая, что аргументы являются реквизитами, а возвращаемое значение является компонентом, который должен быть визуализирован.

Для этого нам нужно преобразовать вашу опору для рендера в опал. 

    DIV do
      P { "Formatted: #{native_props.formatted}" }
      P { "Hours: #{native_props.hours}" }
      P { "Minutes: #{native_props.minutes}" }
      P { "Seconds: #{native_props.seconds}" }
    end.to_n

Здесь есть одна ошибка. Во-первых, props передается как объект javascript. Нам нужно, чтобы это был рубин, поэтому мы завернем его в Native.

На втором этапе Hypertack предоставляет класс секундомера.

В app / javascript / packs отредактируйте hyperstack.js, чтобы включить реактивный секундомер. 

import ReactStopwatch from 'react-stopwatch';
global.ReactStopwatch = ReactStopwatch;

Теперь вы можете использовать Stopwatch в своем коде.

Сложив это вместе, вы получите: 

class Stopwatch < HyperComponent
  render do
    ReactStopwatch(seconds: 0, minutes: 0, hours: 0, limit: "00:00:10").on("<render>") do |props|
      DIV do
        P { "Formatted: #{props.formatted}" }
        P { "Hours: #{props.hours}" }
        P { "Minutes: #{props.minutes}" }
        P { "Seconds: #{props.seconds}" }
      end.to_n
    end
  end
end
...