渲染从字符串阵营组件

Question

我有一些阵营代码字符串中，例如：

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

这个特殊的例子不起作用，但它显示了我在找什么，感谢任何帮助！

谢谢！

Answer 1

巴别尔生产的代码与"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')); 

希望这会有所帮助！

Answer 2

阵营将允许您以呈现一个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