posso usare pug (ex-jade) con framework react?

Question

ho letto un po 'di documentazione pug. ha detto che devo installare pug e l'ho già fatto. allora devo richiedere pug nel mio file js. ma non so dove scrivere la compilazione per il file pug nei miei file di risposta? quali sono i passi giusti per usare pug nella struttura reattiva? grazie! ho davvero apprezzato qualsiasi aiuto. ecco uno dei miei componenti in risposta che mi piacerebbe renderlo con 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 

Answer 1

Con Pug, si hanno due opzioni: il rendering modello a stringa HTML, passando i dati oggetto subito o rendere modello a un javascript funzione efficiente che emette html quando viene passato un oggetto di dati.

Quando si utilizza pug (solo) con dati dinamici, la scelta è ovviamente quella di compilare per funzionare, in modo che i dati possano essere applicati sul client.

Tuttavia, React in realtà non consuma o invia al client, html. Se leggi una spiegazione di JSX, vedrai che si tratta solo di zucchero sintattico simil-HTML che viene compilato con una funzione javascript che crea programmaticamente nodi DOM (essenziale per il modo in cui React gestisce la diffusione e l'aggiornamento della pagina). Pug al momento, anche sul client, emette una stringa HTML. Quindi, l'unico modo potremo utilizzare è dangerouslySetInnerHTML come seguendo:

//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 />

In alternativa, ci sono tentativi di tradurre jade o sintassi pug in reagire direttamente, come pug-react-compiler e babel-plugin-transform-pug-to-react. Sembra che abbiano risolto il problema includendo ulteriori componenti reattivi all'interno del modello di pug, il che potrebbe essere un compromesso auspicabile per loro che potrebbero avere stranezze.