我可以用反应框架的哈巴狗（ex-jade）吗？

问题描述

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

  import React from'反应'; 
从'./Sidebar'导入补充工具栏; 
从'./header/Header'导入标题;来自'../../utils/helpers'的
 import {tokenverify}; $ p $ b从'pug'进口哈巴狗; 
 
 class Home扩展React.Component {
 componentDidMount（）{
 const token = localStorage.getItem（'token'）
 tokenverify（token）
 .catch（（res）=> {
 this.props.history.push（'/'）
}）
} 
 
 render（）{
返回（
< div className =main-container> 
< div className =col-md-1> 
<补充工具栏历史= {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> ; 
）
} 
} 
 
出口默认首页
  

解决方案

我发现这个项目处于开发的早期阶段：。

它目前支持的唯一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 $ /，使用：[re​​quire.resolve（'babel-loader'），require.resolve（'pug-as-jsx-loader'） ]}，
  

3。在您的组件中导入pug模板

 从'./mycomponent.pug'导入myTemplate 
  

4。从渲染函数返回编译模板

  const MyComponent =（{someProperty，someOtherProperty}）=> {
返回myTemplate.call（{}，{
 someProperty，
 someOtherProperty 
}）; 
}; 
  

5。定义一个哈巴狗来渲染组件

 ＃my-element 
 ul.my-list 
 li（key ='{something.id}'，@ repeat ='something 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'）
  

读取关于我的经验：

i have read some of pug documentation. its said that i have to install pug first and i'm already done that. then i have to require pug in my js file.but i don't know where to write the compile for pug file in my react files? what is the right steps to use pug in react framework?thanks! i really appreciated any help.here is one of my component in react that i would like to render it with pug.

 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

解决方案

I found this project in very early phase of its development : https://github.com/bluewings/pug-as-jsx-loader.

I like it because it lets me write my dumb (presentational) react components as pug templates.

The only JSX functionality it currently supports are iterating and conditional if. Which seems good enough for writing most of the dumb components.

Here are the steps to use it

1. Install pug-as-jsx-loader

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

For next step you will have to eject if you are using create-react-app

2. Tell webpack how to handle pug templates.

In your webpack.config.dev.js,

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

3. Import pug template in your component

import myTemplate from './mycomponent.pug'

4. Return compiled template from render function

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

5. Define a pug to render component

#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')

A read about my experience : https://medium.com/p/7610967954a

这篇关于我可以用反应框架的哈巴狗（ex-jade）吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！