1

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

4

1 回答 1

2

renderprop 呈现一个功能组件。函数式组件是一个函数，参数是 props，返回值是要渲染的组件。

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

    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.

第二步是将秒表类暴露给 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
于 2019-05-06T18:30:05.390 回答