Javascript 再次将字符串React组件转换为jsx

我有一个问题，因为从NodeJS读取javascript文件并发送到客户机，在这里我将所有文件作为字符串（这很明显），这是我的问题。是否有任何解决方案可以将字符串组件再次转换为jsx？这不是唯一的html标记，因此

危险的html

或类似方法不起作用

我的字符串组件看起来像典型的React组件，类似于：

import React from 'react';
import { Row } from 'react-bootstrap;
import Home from './Home'
     ......
const Index = () => {
   const renderHelloWorld = <h1>Hello World</h1>

   return (
      <div>{renderHelloWorld}</div>
   )
}

export default Index;

从“React”导入React；
从'react bootstrap'导入{Row}；
从“./主页”导入主页
......
常数索引=（）=>{
const renderHelloWorld=你好世界
返回(
{renderHelloWorld}
)
}
出口违约指数；

---

因此，这是我正在努力解决的字符串，如何将其转换为jsx（可能这是不可能的），我应该使用服务器端呈现和React方法，如

ReactDOMServer

？

尝试这个库

https://www.npmjs.com/package/react-html-parser

import Parser from 'html-react-parser';

const renderHelloWorld = <h1>Hello World</h1>

<div>{Parser(renderHelloWorld)}</div>

---

用于将HTML字符串转换为React组件的实用程序。避免使用危险的HTML，并将标准HTML元素、属性和内联样式转换为等效的React。

尝试此库

https://www.npmjs.com/package/react-html-parser

import Parser from 'html-react-parser';

const renderHelloWorld = <h1>Hello World</h1>

<div>{Parser(renderHelloWorld)}</div>

---

用于将HTML字符串转换为React组件的实用程序。避免使用危险的HTML，并将标准HTML元素、属性和内联样式转换为它们的React等价物。

您可以使用简单的旧JavaScript来完成这项工作

document.querySelector('#elementToBeReplace').innerHTML = renderHelloWorld;

react.js的另一个选项是使用

危险的HTML

<div dangerouslySetInnerHTML={{ __html: renderHelloWorld }} />

---

您可以使用简单的旧JavaScript来完成这项任务

document.querySelector('#elementToBeReplace').innerHTML = renderHelloWorld;

react.js的另一个选项是使用

危险的HTML

<div dangerouslySetInnerHTML={{ __html: renderHelloWorld }} />

---

所以，我的问题的解决方案非常流行和简单（在项目早期阶段），要理解问题并解决它，我们需要回到应用程序的服务器部分。对于

React

应用程序，如果我们希望从服务器渲染jsx文件，我们必须使用服务器端渲染，上述问题将消失。也许我会逐步演示如何在te服务器中启用渲染反应组件

配置后端以启用ES6功能

安装babel软件包

npm install @babel/core @babel/node @babel/preset-env @babel/preset-react --save-dev

有很多方法可以配置Babel，为此我使用了最近的

package.json

{
  ......,
  /*This have to be in the top level in package.json*/

  "babel":{
    "presets":[
      "@babel/preset-env",
      "@babel/preset-react" 
    ]
  }
}

有关babel软件包和配置的更多信息：

将React组件发送到客户端

...//correct React component
const[state, setState] = useState({Component: ''});

fetch('/exampleRoute')
 .then(response => response.json())
  .then(data => setState(state => ({...state, Component: data.data));

....

return(
  <div dangerouslySetInnerHTML={{ __html: state.Component }}></div>
)

为此，我们必须在服务器端安装react和react dom包

npm install react react-dom

例如，在服务器js或route.js文件中：

 ....  //necesarry imported modules
 import ReactDOMServer from 'react-dom/server'
 import Index from './Index';

router.get('/exampleRoute', (req, res) => {

   .... //your route business logic

   res.send(ReactDOMServer.renderToString(<Index/>))
})

//必要的进口模块
从“react dom/server”导入ReactDOMServer
从“./Index”导入索引；
router.get（'/exampleRoute'，（req，res）=>{
..//您的路线业务逻辑
res.send（ReactDOMServer.renderToString（））
})

在客户端中渲染视图

...//correct React component
const[state, setState] = useState({Component: ''});

fetch('/exampleRoute')
 .then(response => response.json())
  .then(data => setState(state => ({...state, Component: data.data));

....

return(
  <div dangerouslySetInnerHTML={{ __html: state.Component }}></div>
)

../correct React组件
const[state，setState]=useState（{Component:'}）；
获取（“/exampleRoute”）
.then（response=>response.json（））
.then（data=>setState（state=>（{…state，Component:data.data））；
....
返回(
)

---

这只是一个简单的示例，如果需要，您可以从后端渲染React组件。这不是应用程序中复杂服务器端渲染的指南，这是一件更复杂的事情，但不是一件困难的事情。

因此，我的问题的解决方案非常流行且简单（在项目早期阶段），要理解问题并解决它，我们需要返回到应用程序的服务器部分。对于

React

应用程序，如果我们想从服务器渲染jsx文件，我们必须使用服务器端渲染，上述问题将消失。也许我将逐步演示如何在te服务器中启用渲染React组件

配置后端以启用ES6功能

安装babel软件包

npm install @babel/core @babel/node @babel/preset-env @babel/preset-react --save-dev

有很多方法可以配置Babel，为此我使用了最近的

package.json

{
  ......,
  /*This have to be in the top level in package.json*/

  "babel":{
    "presets":[
      "@babel/preset-env",
      "@babel/preset-react" 
    ]
  }
}

有关babel软件包和配置的更多信息：

将React组件发送到客户端

...//correct React component
const[state, setState] = useState({Component: ''});

fetch('/exampleRoute')
 .then(response => response.json())
  .then(data => setState(state => ({...state, Component: data.data));

....

return(
  <div dangerouslySetInnerHTML={{ __html: state.Component }}></div>
)

为此，我们必须在服务器端安装react和react dom包

npm install react react-dom

例如，在服务器js或route.js文件中：

 ....  //necesarry imported modules
 import ReactDOMServer from 'react-dom/server'
 import Index from './Index';

router.get('/exampleRoute', (req, res) => {

   .... //your route business logic

   res.send(ReactDOMServer.renderToString(<Index/>))
})

…//necesarry导入的模块
从“react dom/server”导入ReactDOMServer
从“./Index”导入索引；
router.get（'/exampleRoute'，（req，res）=>{
..//您的路线业务逻辑
res.send（ReactDOMServer.renderToString（））
})

在客户端中渲染视图

...//correct React component
const[state, setState] = useState({Component: ''});

fetch('/exampleRoute')
 .then(response => response.json())
  .then(data => setState(state => ({...state, Component: data.data));

....

return(
  <div dangerouslySetInnerHTML={{ __html: state.Component }}></div>
)

../correct React组件
const[state，setState]=useState（{Component:'}）；
获取（“/exampleRoute”）
.then（response=>response.json（））
.then（data=>setState（state=>（{…state，Component:data.data））；
....
返回(
)

---

这只是一个简单的例子，如果有必要，您可以从后端渲染React组件。这不是应用程序中复杂服务器端渲染的指南，这是一件更复杂的事情，但不是一件困难的事情。

我可以问一下，为什么您需要将

.js

文件作为纯文本文件传递？因为用户可以上载带有代码sn的文件ippet到服务器，我希望在客户端呈现此文件。这仅适用于开发模式，因为我使用create react app并禁用在/src Foldermy之外导入文件。我问您为什么需要将

.js

文件作为纯文本文件传递？因为用户可以将带有代码段的文件上载到服务器，我希望在客户端呈现此文件这仅适用于开发模式，因为我使用CreateReact应用程序并禁用/src文件夹外的导入文件