如何将此JSX转换为Hyperstack？

Question

如何将此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

Answer 1

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对象被传递。我们需要的是ruby，所以我们把它包装在Native中。

第二步是将秒表类暴露给Hyperstack。

在app/javascript/packs下，编辑hyperstack.js以包含react-stopwatch。

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