Question

您如何将此JSX转换为Hyperstack组件？

var data:[T]?

此语法Option Explicit Private flag As Boolean 'Variables Dim x1 As Single, y1 As Single, x2 As Single, y2 As Single 'Dibuja el circulo en el formulario Private Sub Dibujar_Circulo() Dim cx As Single, cy As Single, dx As Single Dim dy As Single, Radio As Single cx = x1 cy = y1 dx = x1 - x2 dy = y1 - y2 ' calcula el radio Radio = Sqr(dx * dx + dy * dy) 'Dibuja el círculo Circle (cx, cy), Radio End Sub对我来说是新的。这些是道具吗？

我正在尝试使用此NPM模块：

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

Answer 1

render道具呈现功能组件。功能组件是一个函数，其参数是prop，返回值是要呈现的组件。

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

    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

如何将此JSX转换为Hyperstack？

1 个答案: