javascript - 我可以将哈巴狗(ex-jade)与 react 框架一起使用吗？

Question

我已经阅读了一些 pug 文档。它说我必须先安装哈巴狗，我已经这样做了。然后我必须在我的 js 文件中要求 pug。但我不知道在我的 react 文件中在哪里编写 pug 文件的编译？在 react 框架中使用 pug 的正确步骤是什么？谢谢!我真的很感激任何帮助。这是我的 react 组件之一，我想用哈巴狗来渲染它。

 import React from 'react';
 import Sidebar from './Sidebar';
 import Header from './header/Header';
 import {tokenverify} from '../../utils/helpers';
 import pug from 'pug';

 class Home extends React.Component {
   componentDidMount() {
     const token = localStorage.getItem('token')
     tokenverify(token)
     .catch((res) => {
       this.props.history.push('/')
     })
   }

   render() {
     return(
       <div className="main-container">
         <div className="col-md-1">
           <Sidebar history={this.props.history} username={this.props.params.username}/>
         </div>
         <div className="col-md-11">
           <div className="row">
             <Header history={this.props.history} username={this.props.params.username} />
           </div>
           <div className="row">
             {this.props.children}
           </div>
         </div>
       </div>
     )
   }
 }

 export default Home

Answer 1

我发现这个项目处于开发的早期阶段:https://github.com/bluewings/pug-as-jsx-loader .

我喜欢它，因为它让我可以将我的愚蠢(展示) react 组件编写为哈巴狗模板。

它目前唯一支持的 JSX 功能是迭代和条件 if。这似乎足以编写大多数愚蠢的组件。

这里是使用它的步骤

1.安装 pug-as-jsx-loader

npm install pug-as-jsx-loader --save-dev

如果您使用的是 create-react-app，则下一步必须弹出

<强>2。告诉 webpack 如何处理 pug 模板。

在你的 webpack.config.dev.js 中，

{ test: /\.pug$/, use: [require.resolve('babel-loader'), require.resolve('pug-as-jsx-loader')] },

3.在组件中导入 pug 模板

import myTemplate from './mycomponent.pug'

4.从渲染函数返回编译后的模板

const MyComponent = ({someProperty, someOtherProperty})=> {
  return myTemplate.call({}, {
    someProperty,
    someOtherProperty
  });
};

5.定义一个 pug 来渲染组件

#my-element
  ul.my-list
    li(key='{something.id}', @repeat='something as someProperty')
      div(className='planet')  {something.name}
      div(className='vehicle')   {something.type}
      div(className='overview') {something.cost} 
      div(className='cancel', onClick='{()=> someOtherProperty(something)}')
        div(className='no-mobile fa fa-remove')

阅读我的经历:https://medium.com/p/7610967954a