我可以在react框架中使用pug (ex-jade)吗？
我读过一些pug文档。它说我必须先安装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
Stack Overflow用户
发布于 2018-03-22 23:41:15
我发现这个项目的开发还处于非常早期的阶段：https://github.com/bluewings/pug-as-jsx-loader。
我喜欢它，因为它可以让我把我的哑巴(表象) react组件写成pug模板。
它目前唯一支持的JSX功能是迭代和条件if。这对于编写大多数哑巴组件来说似乎已经足够好了。
以下是使用它的步骤
1.安装pug-as-jsx-
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
Stack Overflow用户
发布于 2017-02-19 11:33:26
使用Pug，您有两个选择:将模板呈现为HTML字符串，立即传递数据对象；或者将模板呈现给一个高效的javascript函数，该函数在传递数据对象时输出html。
当使用pug(单独)处理动态数据时，选择显然是编译成函数，这样数据就可以在客户机上应用。
但是，React实际上并不使用或发送给客户端html。如果您阅读了有关JSX的说明，您将看到它只是类似于HTML的语法糖，它被编译成一个javascript函数，该函数以编程方式创建DOM节点(对于React处理差异和更新页面的方式至关重要)。目前，即使在客户端，Pug也会输出一个HTML字符串。因此，我们能够使用它的唯一方式是dangerouslySetInnerHTML，如下所示：
//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=""";break;case 38:n="&";break;case 60:n="<";break;case 62:n=">";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组件的问题，这可能是他们可能有怪癖的一个理想的权衡。
https://stackoverflow.com/questions/37895635
复制相似问题
腾讯云开发者
