Kann ich Mug (Ex-Jade) mit React Framework verwenden?

Question

Ich habe einige der Mops-Dokumentation gelesen. Es heißt, dass ich Mug zuerst installieren muss und ich bin schon fertig. Dann muss ich Mops in meiner Js-Datei verlangen. , aber ich weiß nicht, wo ich die Kompilierung für Mops-Datei in meine React-Dateien schreiben soll? Was sind die richtigen Schritte, um Mug im Reaktionsrahmen zu verwenden? danke! Ich habe jede Hilfe sehr geschätzt. hier ist eine meiner Komponenten in reagieren, dass ich es mit Mops machen möchte.

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

Mit Mops, haben Sie zwei Möglichkeiten: Render Vorlage HTML-String, vorbei an dem Datenobjekt direkt oder macht Vorlage zu einer effizienten Javascript-Funktion, die HTML ausgibt, wenn ein Datenobjekt übergeben.

Bei der Verwendung von Mops (allein) mit dynamischen Daten, ist die Wahl natürlich zu kompilieren, um zu funktionieren, so dass Daten auf dem Client angewendet werden können.

React tatsächlich nicht konsumieren, oder senden Sie an den Client, HTML. Wenn Sie eine Erklärung von JSX lesen, werden Sie sehen, dass es nur HTML-ähnlicher syntaktischer Zucker ist, der zu einer JavaScript-Funktion kompiliert wird, die programmatisch DOM-Knoten erstellt (wesentlich für die Art und Weise, wie React die Seite bearbeitet und aktualisiert). Pug gibt gerade auf dem Client eine HTML-Zeichenfolge aus. Daher werden in der Lage die einzige Art, wie wir es zu benutzen ist dangerouslySetInnerHTML, wie folgend:

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

Alternativ gibt Versuche sind Jade oder Mops-Syntax, in die übersetzt reagieren direkt, wie pug-react-compiler und babel-plugin-transform-pug-to-react. Es scheint, dass sie gelöst wurden, einschließlich weiterer Reaktionskomponenten innerhalb der Mops-Vorlage, was ein wünschenswerter Kompromiss für sie sein könnte, die möglicherweise Macken haben.