Tengo una cadena y quiero representarla en reaccionar JS
const htmlString = "<h1> <Ref description=\"Magic may or may not be happening\"> hello magic</Ref></h1>" return ( <div> <h1> {htmlString}</h1> </div\>)¿Puedo renderizar este htmlString en react js? ¡Por favor, ayuda!
Puede usar react-html-parser para lograr esto
import React from 'react'; import ReactHtmlParser from 'react-html-parser'; class HtmlComponent extends React.Component { render() { const html = '<div>Example HTML string</div>'; return <div>{ ReactHtmlParser(html) }</div>; } }Ver documentos aquí
Puede usar peligrosamente el atributo SetInnerHTML en un elemento html para establecer la cadena como HTML. Pero tenga en cuenta que configurar HTML como este en React es arriesgado, ya que puede exponer a sus usuarios a un ataque de secuencias de comandos entre sitios (XSS). Para saber más sobre cómo usarlo, consulte aquí los documentos oficiales de React: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
Publicar un ejemplo de caso de uso a continuación sobre cómo usarlo.
function App() { function getMarkup() { return {__html: '<h3>My Content here..</h3>'}; // The HTML string you want to set } return ( <div className="App"> <div dangerouslySetInnerHTML={getMarkup()}></div> </div> ); }