render Reagieren Komponente aus einem String

Question

ich einige in der Zeichenfolge React-Code haben, zum Beispiel:

const component = ` 
function App() { 
    return (
    <div> 
    test 
    </div> 
); 
} 
`; 

Und ich möchte, dass die Komponente zu machen in der Lage sein aus Browser, so etwas wie:

import React, { Component } from 'react'; 
import { render } from 'react-dom'; 
import * as babel from 'babel-standalone'; 


const babelCode = babel.transform(component, { presets: ['react', 'es2015'] }).code; 

render(eval(babelCode), document.getElementById('WorkFlow')); 

Dieses besondere Beispiel funktioniert nicht, aber es zeigt, was ich suche, jede Hilfe geschätzt!

Danke!

Answer 1

Babel produziert den Code mit "use strict" und eval() funktioniert damit nicht gut. Zuerst sollten wir diese Zeile manuell entfernen.

const code = babelCode.replace('"use strict";', "").trim(); 

Idealerweise nach dieser folgenden Zeilen funktionieren sollte.

eval(code); 
render(<App/>, document.getElementById('WorkFlow')); 

Beachten Sie, dass Sie nicht brauchen, eval() innen machen zu setzen. Es gibt nicht Ihre App-Funktion oder irgendetwas zurück. Stattdessen fügt es App zum Kontext hinzu und wir können es nach eval() Anweisung verwenden.

Aber in der Regel hat React App einen Compile-Schritt mit webpack oder ähnliches Werkzeug und wird sich über undefined App beschweren.

Als Workaround können wir unsere Komponente mit einer Function umhüllen, die unsere Komponente selbst zurückgibt. Jetzt können wir diese Funktion aufrufen, um unsere Komponente zu erhalten. Aber der Kontext der Umbruchfunktion hat keine Variable React. Also müssen wir es manuell als Parameter übergeben. Wenn Sie eine andere Variable aus dem aktuellen Kontext verwenden möchten, müssen Sie diese ebenfalls übergeben.

const code = babelCode.replace('"use strict";', "").trim(); 
const func = new Function("React", `return ${code}`); 
const App = func(React) 
render(<App/>, document.getElementById('WorkFlow')); 

Hoffe, das hilft!

Answer 2

Mit React können Sie entweder Component oder Element rendern. Sie können sich einen Element als rohen HTML-Code in JSX vorstellen, während ein Component ein Prototyp ist, der von React.Component erbt. In Ihrem Code versuchen Sie, ein Ergebnis der Auswertung des Babel transpiled Code zu rendern, der fehlschlägt (ich bin mir nicht sicher, was es ist, aber es ist wahrscheinlich undefined oder null). Wenn Sie wollen, damit es funktioniert, zuerst den Code bewerten und dann die Funktion aufrufen, um den Element Code an die render Funktion zu übergeben:

eval(babelCode); // now the App function has been defined and you can use it in the code 
render(App(), document.getElementById('WorkFlow')); 
     // ^^ here the App function is being invoked 

---

Alte Antwort (ich dachte, dass Sie die component passieren versuchten, wie eine Datei nicht und nicht als Variable zu transpiler):

babel wird nie Strings transpilieren, also wird dies nicht für Sie arbeiten. Sie können jedoch einen rohen Code JS anstelle von JSX als String-Inhalt verwenden. Mehr dazu können Sie hier lesen: https://facebook.github.io/react/docs/react-without-jsx.html