从字符串渲染 React 组件

我在字符串中有一些 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'));

这个特定的示例不起作用，但它显示了我正在寻找的内容，感谢任何帮助！

Thanks!

Babel 生成代码"use strict" and eval()不能很好地配合它。首先，我们应该手动删除该行。

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

理想情况下，在此之后以下几行应该可以工作。

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

请注意，您不需要放置eval()内部渲染。它不会返回您的应用程序功能或任何内容。相反，它会将 App 添加到上下文中，我们可以在之后使用它eval()陈述。

但通常，React 应用程序有一个编译步骤webpack或类似的工具，会抱怨未定义App.

作为解决方法，我们可以用Function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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'));

希望这可以帮助！