从字符串渲染 React 组件

Question

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

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

谢谢！

Answer 1

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

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

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

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

请注意，您不需要放入eval()render. 它不会返回您的应用程序功能或任何内容。相反，它会将 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'));

希望这可以帮助！