渲染從字符串陣營組件

我有一些陣營代碼字符串中，例如：渲染從字符串陣營組件

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

而且我希望能夠呈現該組件從瀏覽器中，是這樣的：

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'));

這個特殊的例子不起作用，但它顯示了我在找什麼，感謝任何幫助！

謝謝！

來源

2017-05-27 Sarkis Arutiunian

巴別爾生產的代碼與"use strict"和eval()不能很好地工作。首先，我們應該手動刪除該行。

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

理想情況下，以下行後應該工作。

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

注意，你不需要把eval()內呈現。它不會返回你的App功能或任何東西。相反，它會將App添加到上下文中，我們可以在eval()聲明後使用它。

但通常情況下，React應用程序有webpack或類似工具的編譯步驟，並會抱怨未定義的App。

作爲一種變通方法，我們可以用Function返回我們的組件本身的包裹我們的組件。現在我們可以調用這個函數來獲取我們的組件。但是包裝功能的上下文不具有React變量。所以我們必須手動將它作爲參數傳遞。如果您打算使用當前上下文中的任何其他變量，那麼您也必須通過這些變量。

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

希望這會有所幫助！

來源

2017-05-28 03:34:14

哇，這真的有用，謝謝！ –

只有一件事，實際上它的工作原理是這樣，但我們應該在'Function'類之前輸入'new' –

糟糕！是的，我更新了答案！ –

陣營將允許您以呈現一個Component或Element。你可以把Element在JSX原始的HTML代碼的，而Component爲原型，從React.Component繼承。在你的代碼試圖使評估transpiled碼通天，將失敗的結果（我不知道它是什麼，但它可能undefined或null）。如果你想它的工作，首先評估代碼，然後調用該函數將Element代碼傳遞給render功能：

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

舊的答案（我想你試圖通過component爲文件沒有，而不是作爲一個變量來transpiler）：

babel永遠transpile字符串，所以這是行不通的爲你。但是，您可以考慮使用原始JS代碼而不是JSX作爲字符串內容。更多關於它你可以在這裏閱讀：https://facebook.github.io/react/docs/react-without-jsx.html

來源

2017-05-27 20:03:19 Nhor

爲什麼它不會transpile如果這樣做，即使在上面的例子？我可以在客戶端使用巴貝爾變換字符串，問題是它有什麼辦法來渲染它？ –

嘿，我誤解了這個概念，我以爲你不是將'component'作爲文件傳遞給transpiler，而是作爲一個變量傳遞給transpiler。讓我編輯我的答案 – Nhor

渲染從字符串陣營組件

回答

相關問題