reactjs 如何将字符串作为React组件进行求值？

kzipqqlq 于 2022-12-03 发布在 React

关注(0)|答案(1)|浏览(120)

我试图做一个网站，让用户输入一些React代码，然后它呈现在页面的另一边，所以他们可以看到它看起来像什么。
我的问题是，我有一个字符串形式的用户源代码（它可能返回一个函数或类组件），但我不知道如何将其转换为可以呈现的实际React组件。
首先，我尝试使用new Function()构造函数，它允许您从字符串创建函数，如下所示：

import {render} from "react-dom"

const userInputtedCode = `
return function App() {
    return <div>Hello world</div>
}
`

const func = new Function("React", userInputtedCode);
const App = func(React)
render(<App/>, document.getElementById('WorkFlow'));

但这不起作用，因为我得到错误SyntaxError: expected expression, got '<'
我也尝试过react-jsx-parser之类的库，但这并不符合我的需要，因为我想创建一个完整的react组件，其中可能包含状态、属性、嵌套组件等，而不仅仅是解析一些JSX。
有什么想法，我可以把返回函数/类的源代码字符串转换成实际的react组件吗？谢谢！

reactjs

来源：https://stackoverflow.com/questions/74620013/how-to-evaluate-a-string-as-a-react-component

1条答案

按热度按时间

ycl3bljg1#

您可以尝试以下方法：

import React, { Component } from "react";
import { render } from "react-dom";
import * as babel from "babel-standalone";

const userInputtedCode = `
function App() {
    return <div>Hello world</div>
}
`;
const babelCode = babel.transform(userInputtedCode, {
  presets: ["react", "es2017"]
}).code;

const code = babelCode.replace('"use strict";', "").trim();
const func = new Function("React", `return ${code}`);
const App = func(React);
render(<App />, document.getElementById("root"));

PS：运行应用程序之前，请确保运行npm i babel-standalone。

赞(0）回复(0）举报 2022-12-03

我来回答

reactjs 如何将字符串作为React组件进行求值？

1条答案

相关问题

热门标签

最新问答