我在字符串中有一些 React 代码，例如：
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'));
这个特定的例子不起作用，但它显示了我正在寻找的东西，任何帮助表示赞赏！
谢谢！
Babel 生成代码"use strict"并且eval()不能很好地使用它。首先，我们应该手动删除该行。
const code = babelCode.replace('"use strict";', "").trim();
理想情况下，在此之后以下几行应该可以工作。
eval(code);
render(<App/>, document.getElementById('WorkFlow'));
请注意，您不需要放入eval()渲染。它不会返回您的 App 函数或任何东西。相反，它会将 App 添加到上下文中，我们可以在eval()语句之后使用它。
但通常，React 应用程序有一个使用webpack或类似工具的编译步骤，并且会抱怨 undefined App。
作为一种解决方法，我们可以用一个函数来包装我们的组件，该函数返回我们的组件本身。现在我们可以调用这个函数来获取我们的组件。但是包装函数的上下文没有React变量。所以我们必须手动将其作为参数传递。如果您要使用当前上下文中的任何其他变量，则也必须传递这些变量。
const code = babelCode.replace('"use strict";', "").trim();
const func = new Function("React", `return ${code}`);
const App = func(React)
render(<App/>, document.getElementById('WorkFlow'));
希望这可以帮助！
React 将允许您渲染 aComponent或Element. 您可以将 anElement视为 JSX 中的原始 HTML 代码，而 aComponent是一个原型，它继承自React.Component. 在您的代码中，您试图呈现评估 babel 转译代码的结果，该结果将失败（我不确定它是什么，但可能是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文件作为文件而不是作为变量传递给转译器）：
babel永远不会转译字符串，所以这对你不起作用。但是，您可以考虑使用原始JS代码而不是JSX作为字符串内容。更多关于它你可以在这里阅读：https : //facebook.github.io/react/docs/react-without-jsx.html