我可以使用帕格（前玉）与反应框架？

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

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

使用帕格，你有两种select：将模板呈现给HTMLstring，马上传递数据对象，或者将模板呈现给一个有效的javascript函数，当传递一个数据对象时输出html。

当使用帕格（单独）dynamic数据时，select显然是编译运行，以便数据可以在客户端应用。

但是，React实际上不会消耗或发送给客户端的HTML。 如果您阅读了JSX的解释，您将会看到，它仅仅是一个类似于HTML的语法糖，它被编译为一个JavaScript函数，以编程的方式创buildDOM节点（React处理差异和更新页面的基本方法）。 帕格目前，甚至在客户端，输出一个HTMLstring。 因此，我们能够使用它的唯一方法是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(ri,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 />