Czy mogę użyć mops (ex-jade) z ramą reakcji?

Question

Przeczytałem kilka dokumentacji mops. powiedział, że muszę najpierw zainstalować mopsa i już to zrobiłem. to muszę wymagać mopsa w moim pliku js. , ale nie wiem, gdzie napisać kompilację pliku mops w moich plików reagowania? Jakie są właściwe kroki, aby użyć mops w ramach reakcji? dzięki! Naprawdę doceniam każdą pomoc. Oto jeden z moich komponentów, który reaguje na to, że chciałbym go renderować przy pomocy mopsa.

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

Z Mops, masz dwie opcje: renderowanie szablon napisu HTML, przekazując dane sprzeciw od razu lub uczynić szablon skuteczny funkcji javascript, która wyprowadza html kiedy przeszedł obiektu danych.

Podczas korzystania z mops (sam) z danymi dynamicznymi, wybór jest oczywiście do kompilacji do funkcji, aby dane mogły być stosowane na kliencie.

Jednak React w rzeczywistości nie zużywa ani nie wysyła do klienta html. Jeśli przeczytasz wyjaśnienie JSX, zobaczysz, że jest to tylko syntaktyczny cukier wyglądający jak HTML, który jest kompilowany do funkcji javascript, która programowo tworzy węzły DOM (istotne dla sposobu, w jaki React obsługuje różnicowanie i aktualizowanie strony). Mops w tym momencie, nawet na kliencie, wyprowadza ciąg znaków HTML. Zatem, tylko w ten sposób będzie można z niego korzystać jest dangerouslySetInnerHTML następujące:

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

Alternatywnie, próbuje się tłumaczyć Jade składnię zadarty do reakcji bezpośrednio, takie jak pug-react-compiler i babel-plugin-transform-pug-to-react. Wygląda na to, że rozwiązali się, włączając dalsze komponenty reagujące wewnątrz szablonu mopsa, co może być pożądanym kompromisem dla nich, być może mającym dziwactwa.