Использовать строку как JS файл, объявляющий компонент реакции

Question

Я использую плагин ( response-simple-code-editor ), который позволяет мне редактировать полный JS файл из imports до конца объявления компонента.

This editor returns a string with all the file declaration. In this example, it would be:

import React from "react"; import ReactDOM from "react-dom"; function App() { return ( Hello world ); } export default App;

Is there a way to use this string, as code. I Mean, render it, or read it like if it is a normal file ?

I've tried response-jsx-parser , но он работает только со строками, которые являются компонентом, а не полными JS файлами.

Answer 1

Попробуйте использовать eval . eval() запустит свой ввод (строку типа), как если бы он был частью программы:

string = "import React from 'react'; import ReactDOM from 'react-dom'; function App() { return ( <h1>Hello world</h1> ); } export default App;";
eval(string);

Вы заметите, что в документах MDN есть предупреждение не использовать eval по соображениям безопасности. Это связано с тем, что он выполняет код со всеми разрешениями, которые пользователь предоставил веб-странице, поэтому, если есть вероятность, что кто-то злой мог изменить строку, тогда они могут запустить любой код, который они хотят, на устройстве клиента. Однако это проблема только для определенных случаев использования и, вероятно, не для вас. См. «Насколько опасен eval?» . Это также немного медленно из-за того, что код должен быть скомпилирован, но для вашего примера это не будет действительно заметно.