如何使用哈巴狗起反应？

Question

如何使用哈巴狗和在一起反应？

就像是

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

Answer 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>
)

存储库中还有更多示例。

Answer 2

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

您将在此处找到执行此操作的步骤：我可以将 pug (ex-jade) 与 react 框架一起使用吗？

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

Answer 3

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