javascript - 从字符串渲染 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 或类似工具的编译步骤，并且会提示未定义的 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'));

希望这对您有所帮助!