¿Cómo poner el componente ReactJS dentro de la string HTML?

El siguiente enfoque cubre cómo poner React Component en una string HTML al analizar la string HTML en DOM usando el módulo html-to-react .

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

Es una biblioteca liviana que es responsable de convertir HTML sin formato a una estructura React DOM. Esta biblioteca convierte la string en un árbol de Nodes de elementos DOM, luego transforma cada Node en un elemento React usando un conjunto de instrucciones que usted define.

Por ejemplo, si tenemos un componente llamado ReactComponent y una string HTML “ <div> Hi <MyReactComponent/> </div>” , ahora podemos convertirlo usando la biblioteca anterior.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando.

  npx create-react-app foldername

• Paso 2 : después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.

  cd foldername

• Paso 3 : después de crear la aplicación ReactJS, instale el módulo html-to-react usando el siguiente comando.

  npm i html-to-react

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: 

Cree un componente React llamado ReactComponent.js y escriba el siguiente código en él.

export default function ReactComponent() {
    return(
        <div>
            <p>
                Hello from React Component
            </p>
  
        </div>
    )
}

Ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

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 <CustomElement />;
    }
  },
  // Default processing
  {
    shouldProcessNode: () => true,
    processNode: processNodeDefinitions.processDefaultNode
  }
];
  
export default class MyParentComponent extends Component {
  render() {
    let htmlString = "<div>Hi<my-react-component></my-react-component></div>";
    return htmlParser.parseWithInstructions(htmlString, 
      isValidNode, processingInstructions);
  }
}

Explicación: La parte esencial aquí es procesar Instrucciones . Cada Node en el árbol DOM se compara con cada instrucción en la array, comenzando desde arriba, hasta que shouldProcessNode devuelve verdadero, y el Node se transforma en un elemento React mediante la función processNode correspondiente . Esto permite reglas de procesamiento bastante complejas, pero rápidamente se complica un poco si desea procesar elementos personalizados anidados. El resultado del ejemplo es el equivalente del siguiente código en sintaxis JSX.

<div>
    Hi
    <ReactComponent/>
</div>

Paso para ejecutar la aplicación : ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto.

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida.

Producción