我可以将 pug (ex-jade) 与 react 框架一起使用吗？

IT技术 javascript node.js reactjs pug
2021-04-22 04:12:30

我已经阅读了一些哈巴狗文档。它说我必须先安装 pug 并且我已经完成了。然后我必须在我的 js 文件中要求 pug。但我不知道在哪里编写我的react文件中 pug 文件的编译？在 React 框架中使用 pug 的正确步骤是什么？谢谢！我真的很感激任何帮助。这是我的react组件之一，我想用 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
2个回答

我在其开发的早期阶段发现了这个项目：https : //github.com/bluewings/pug-as-jsx-loader。

我喜欢它，因为它让我可以将我的愚蠢（展示性）react组件编写为 pug 模板。

它目前支持的唯一 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.从render函数返回编译模板

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

使用 Pug，您有两种选择：将模板渲染为 HTML 字符串、立即传递数据对象或将模板渲染到高效的 javascript 函数，该函数在传递数据对象时输出 html。

对动态数据使用pug(alone)时，选择显然是编译成函数，这样数据就可以应用到客户端了。

然而，React 并没有实际使用或发送给客户端的 html。如果你阅读了 JSX 的解释，你会发现它只是一个类似于 HTML 的语法糖，它被编译成一个 javascript 函数，该函数以编程方式创建 DOM 节点（对于 React 处理差异和更新页面的方式至关重要）。目前，即使在客户端上，Pug 也会输出一个 HTML 字符串。因此，我们能够使用它的唯一方法是 危险地SetInnerHTML，如下所示：

//from https://runkit.io/qm3ster/58a9039e0ef2940014a4425b/branches/master?name=test&pug=div%20Wow%3A%20%23%7Ba%7D%23%7Bb%7D
function pug_escape(e){var a=""+e,t=pug_match_html.exec(a);if(!t)return e;var r,c,n,s="";for(r=t.index,c=0;r<a.length;r++){switch(a.charCodeAt(r)){case 34:n="&quot;";break;case 38:n="&amp;";break;case 60:n="&lt;";break;case 62:n="&gt;";break;default:continue}c!==r&&(s+=a.substring(c,r)),c=r+1,s+=n}return c!==r?s+a.substring(c,r):s}
var pug_match_html=/["&<>]/;
function pug_rethrow(n,e,r,t){if(!(n instanceof Error))throw n;if(!("undefined"==typeof window&&e||t))throw n.message+=" on line "+r,n;try{t=t||require("fs").readFileSync(e,"utf8")}catch(e){pug_rethrow(n,null,r)}var i=3,a=t.split("\n"),o=Math.max(r-i,0),h=Math.min(a.length,r+i),i=a.slice(o,h).map(function(n,e){var t=e+o+1;return(t==r?"  > ":"    ")+t+"| "+n}).join("\n");throw n.path=e,n.message=(e||"Pug")+":"+r+"\n"+i+"\n\n"+n.message,n}function test(locals) {var pug_html = "", pug_mixins = {}, pug_interp;var pug_debug_filename, pug_debug_line;try {;var locals_for_with = (locals || {});(function (a, b) {;pug_debug_line = 1;
pug_html = pug_html + "\u003Cdiv\u003E";
;pug_debug_line = 1;
pug_html = pug_html + "Wow: ";
;pug_debug_line = 1;
pug_html = pug_html + (pug_escape(null == (pug_interp = a) ? "" : pug_interp));
;pug_debug_line = 1;
pug_html = pug_html + (pug_escape(null == (pug_interp = b) ? "" : pug_interp)) + "\u003C\u002Fdiv\u003E";}.call(this,"a" in locals_for_with?locals_for_with.a:typeof a!=="undefined"?a:undefined,"b" in locals_for_with?locals_for_with.b:typeof b!=="undefined"?b:undefined));} catch (err) {pug_rethrow(err, pug_debug_filename, pug_debug_line);};return pug_html;}
// pug source: "div Wow: #{a}#{b}"
// this would obviously be much shorter if you include pug-runtime globally in your application

function createMarkup(a,b) {
  return {__html: test({a:a,b:b})};
}

function MyComponent(props) {
  return <div dangerouslySetInnerHTML={createMarkup(props.a, props.b)}/>;
}

ReactDOM.render(
  <MyComponent a="banana" b="&patata"/>,
  document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id=root />

或者，也有尝试将 jade 或 pug 语法直接翻译成 react，例如pug-react-compiler和babel-plugin-transform-pug-to-react. 似乎他们解决了在 pug 模板中包含更多react组件的问题，这对于可能有怪癖的他们来说可能是一个理想的权衡。

其它你可能感兴趣的问题
上一篇传递箭头函数 vs 传递函数 下一篇React excel文件下载已损坏