如何将 PUG 转换为 JSX？

Question

我正在尝试在 JS React 应用程序中使用一些用 Pug 编写的代码。

我找到了这个可以转换代码的插件here，但是有一个问题。它声明它无法转换“。”声明，其中有一些。

那么我应该用什么来替换“.”以使其工作（或者如果有人可以将其转换为 React JS 那就太棒了！

我希望使用的 Pug 代码：

- const droplets = 250
.rain
  - for (let r = 0; r < droplets; r++)
    svg.rain__drop(preserveAspectRatio="xMinYMin", viewBox='0 0 5 50', style=`--x: ${Math.floor(Math.random() * 100)}; --y: ${Math.floor(Math.random() * 100)}; --o: ${Math.random()}; --a: ${Math.random() + 0.5}; --d: ${(Math.random() * 2) - 1}; --s: ${Math.random()}`)
      path(stroke='none', d="M 2.5,0 C 2.6949458,3.5392017 3.344765,20.524571 4.4494577,30.9559 5.7551357,42.666753 4.5915685,50 2.5,50 0.40843152,50 -0.75513565,42.666753 0.55054234,30.9559 1.655235,20.524571 2.3050542,3.5392017 2.5,0 Z")

Answer 1

.rain__drop

被解析为这个 HTML 标记

class="rain__drop"

这意味着这个 JSX:

className="rain__drop"

根据经验，如果您有可能运行该应用，您可以随时检查生成的标记。

可能有用：Pug: interpolation。
可能更有用：PUG to HTML. Tip: combine it with HTML to JSX.
Copy/paste时间！

如何将 PUG 转换为 JSX？

How do I turn PUG into JSX?

javascript

reactjs

pug