再次将字符串 React Component 转换为 jsx

Question

我有一个问题，因为从 NodeJS 读取 javascript 文件并发送到客户端，在这里我将所有文件作为字符串接收（这很明显），这是我的问题。 是否有将字符串组件再次转换为 jsx 的解决方案？ 这不仅是 html 标记，因此dangerouslySetInnerHTML的 SetInnerHTML 或类似方法不起作用。

我的字符串组件看起来像典型的 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;

所以这是我正在努力解决如何将其转换为 jsx 的字符串（也许这是不可能的），我应该使用像ReactDOMServer这样的 React 方法的服务器端渲染？

Answer 1

试试这个库https://www.npmjs.com/package/react-html-parser 。

用于将 HTML 字符串转换为 React 组件的实用程序。 避免使用 dangerouslySetInnerHTML 并将标准 HTML 元素、属性和内联 styles 转换为其 React 等效项。

Answer 2

您可以使用普通的旧 JavaScript 来解决问题。

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

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

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

或者您可以使用html-react-parser 。

import Parser from 'html-react-parser';

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

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

Answer 3

所以，我的问题的解决方案非常流行和简单（在早期项目阶段），要了解问题并修复它，我们需要将 go 返回到应用程序的服务器部分。 对于React应用程序，如果我们想从服务器渲染 jsx 文件，我们必须使用服务器端渲染，上面的问题就会消失。 也许我会逐步展示如何在服务器中启用渲染 React 组件。

1. 配置后端以启用 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 包和配置的信息： https://babeljs.io/docs/en/

2. 将 React 组件发送到客户端

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

   npm install react react-dom

   例如在您的 server、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/>)) })

3. 在客户端渲染视图

   ...//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 组件。 这不是应用程序中复杂的服务器端渲染的指南，这是更复杂的事情，但没有困难。