如何在 React 中使用 Pug？答案

【问题标题】：How to use Pug with React?如何在 React 中使用 Pug？
【发布时间】：2018-01-28 00:30:27
【问题描述】：

类似：

btn = ({click, text})->
    a.pug.btn(target='blank' on-click=click) #{text}

【问题讨论】：

为什么投反对票？我也讨厌哈巴狗，但是来吧..
我继续开发它。甚至使语法突出显示。查看github.com/askucher/lsxc。无论您投赞成票还是反对票，您都无法更改进度。
@HumanCatfood 你为什么讨厌它？
郑重声明，我喜欢哈巴狗。我喜欢所有这些让 HTML 变得更简单的 MD 样式模板语言。

标签： reactjs pug

【解决方案1】：

我看到这个问题已经很老了，但如果你还在寻找答案，那么有一个官方的 babel 插件，它将 pug 转换为 jsx： https://github.com/pugjs/babel-plugin-transform-react-pug

例如：

export default const ReactComponent = props => pug`
  .wrapper
    if props.shouldShowGreeting
      p.greeting Hello World!

    button(onClick=props.notify) Click Me
`

会提供类似这样的：

export default const ReactComponent = props => (
  <div className="wrapper">
    {props.shouldShowGreeting && (
      <p className="greeting">Hello World</p>
    )}
    <button onClick={props.notify}>Click Me</button>
  </div>
)

存储库中有更多示例。

【讨论】：

【解决方案2】：

您可以使用 pug-as-jsx ：https://github.com/bluewings/pug-as-jsx-loader

您将在此处找到执行此操作的步骤：can i use pug (ex-jade) with react framework?

关于此的博客：https://medium.com/nishantsblog/pug-templates-for-react-presentation-components-7610967954a

【讨论】：

这是一个很好的例子。我喜欢它，但在 lsx 中你可以混合使用 sass、livescript 和 pug。这是完全不同的事情。
这些模板被解释为 JSX。并且使用 HOC，您可以使用 css 模块以及您在 JSX 中使用的任何其他样式方法。

【解决方案3】：

将 html 预处理器与模板库一起使用是个坏主意，它是 DOM 实时构建的，JSX 更适合。无论如何，在将 pug 编译成 HTML 之后，您可以使用 dangerouslySetInnerHTML 属性来渲染它。

【讨论】：

这不是将 html 预处理器与模板一起使用。即将在coffeescript或livescript中具有与pug相同的语义。
哈巴狗在到达浏览器之前会被转换成js。