你如何将这个 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 属性呈现功能组件。函数式组件是一个函数，参数是 props，return 值是要渲染的组件。

因此，我们需要将您的渲染道具转换为蛋白石。

    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.

中

第二步是将秒表 class 暴露给 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

你如何将这个 JSX 转换为 Hyperstack？

How do you convert this JSX to Hyperstack?

hyperstack