如何将 ReactJS 组件放入 HTML字符串中？

以下方法介绍了如何通过使用html-to-react模块将 HTML 字符串解析为 DOM 来将 React 组件放入 HTML 字符串中。

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

编程需要懂一点英语

它是一个轻量级库，负责将原始 HTML 转换为 React DOM 结构。该库将字符串转换为 DOM 元素的节点树，然后使用您定义的一组指令将每个节点转换为 React 元素。

例如，如果我们有一个名为ReactComponent的组件和一个 HTML字符串“

” ，现在我们可以使用上面的库对其进行转换。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序。
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹。
```
cd foldername
```
第 3 步：创建 ReactJS 应用程序后，使用以下命令安装html-to-react模块。
```
npm i html-to-react
```

项目结构：它将如下所示。

例子：

创建一个名为ReactComponent.js的 React 组件，并在其中编写以下代码。

ReactComponent.js

export default function ReactComponent() {
    return(
        
            
                Hello from React Component
            
  
        
    )
}

App.js

import { Parser, ProcessNodeDefinitions } from "html-to-react";
import ReactComponent from "./ReactComponent";
import React, { Component } from 'react';
  
const customElements = {
  "my-react-component": ReactComponent
};
  
// Boilerplate stuff
const htmlParser = new Parser(React);
const processNodeDefinitions = new ProcessNodeDefinitions(React);
function isValidNode() {
  return true;
}
  
// Custom instructions for processing nodes
const processingInstructions = [
  // Create instruction for custom elements
  {
    shouldProcessNode: (node) => {
      // Process the node if it matches a custom element
      return (node.name && customElements[node.name]);
    },
    processNode: (node) => {
      let CustomElement = customElements[node.name];
      return ;
    }
  },
  // Default processing
  {
    shouldProcessNode: () => true,
    processNode: processNodeDefinitions.processDefaultNode
  }
];
  
export default class MyParentComponent extends Component {
  render() {
    let htmlString = "Hi";
    return htmlParser.parseWithInstructions(htmlString, 
      isValidNode, processingInstructions);
  }
}

现在在 App.js 文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

应用程序.js

import { Parser, ProcessNodeDefinitions } from "html-to-react";
import ReactComponent from "./ReactComponent";
import React, { Component } from 'react';
  
const customElements = {
  "my-react-component": ReactComponent
};
  
// Boilerplate stuff
const htmlParser = new Parser(React);
const processNodeDefinitions = new ProcessNodeDefinitions(React);
function isValidNode() {
  return true;
}
  
// Custom instructions for processing nodes
const processingInstructions = [
  // Create instruction for custom elements
  {
    shouldProcessNode: (node) => {
      // Process the node if it matches a custom element
      return (node.name && customElements[node.name]);
    },
    processNode: (node) => {
      let CustomElement = customElements[node.name];
      return ;
    }
  },
  // Default processing
  {
    shouldProcessNode: () => true,
    processNode: processNodeDefinitions.processDefaultNode
  }
];
  
export default class MyParentComponent extends Component {
  render() {
    let htmlString = "Hi";
    return htmlParser.parseWithInstructions(htmlString, 
      isValidNode, processingInstructions);
  }
}

说明：这里的基本部分是processingInstructions 。 DOM 树中的每个节点都会根据数组中的每条指令进行检查，从顶部开始，直到shouldProcessNode返回 true，并且相应的processNode函数将节点转换为 React 元素。这允许相当复杂的处理规则，但如果你想处理嵌套的自定义元素，它很快就会变得有点混乱。该示例的结果等效于以下 JSX 语法中的代码。

Hi

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出。

输出