Question

如何使用哈巴狗并一起做出反应？

像

这样的东西

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

Answer 1

您可以使用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

Answer 2

我看到这个问题已经很老了，但是如果您仍在寻找答案，那么可以使用babel的官方插件，将其转换为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 3

使用带有模板库的html预处理器是个坏主意，DOM正在实时构建，JSX更适合这种情况。无论如何，在将pug编译成HTML之后，您可以使用dangerouslySetInnerHTML属性进行渲染。

如何使用哈巴狗做出反应？

3 个答案: