反応フレームワークでpug（ex-jade）を使用できますか？

Question

私はいくつかのpugのドキュメントを読んでいます。そのpugを最初にインストールしなければならないと私はすでにやっていると言われています。私は私のjsファイルにpugが必要です。 しかし、私は私の反応ファイルにpugファイルのコンパイルを書く場所を知らないのですか？反応フレームワークでpugを使用する正しい手順は何ですか？感謝！ ありがとう！私は本当に助けを感謝します。 ここには、私がpugでレンダリングしたい反応の中のコンポーネントの1つがあります。パグで

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

は、次の2つのオプションがあります、HTML文字列にテンプレートをレンダリングし、すぐにデータオブジェクトを渡したり、データオブジェクトを渡されたときに、HTMLを出力し、効率的なJavaScript関数にテンプレートをレンダリングします。

ダイナミックデータでpug（単独）を使用する場合、明らかに関数をコンパイルしてクライアントにデータを適用できるようになります。

しかし、Reactは実際にはHTMLを消費せず、クライアントに送信しません。 JSXの説明を読んだら、DOMノードをプログラムで作成するjavascript関数にコンパイルされた、HTMLに似た構文的な砂糖であることがわかります（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="&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 />

はあるいは、pug-react-compilerととして直接反応に玉またはパグ構文を変換しようとする試みがありますbabel-plugin-transform-pug-to-react。パグテンプレートの内部に反応成分を追加することで解決したようですが、これはおそらくクォークを持つために望ましいトレードオフになるかもしれません。