0
193
VistasReactJs no representa la etiqueta de anclaje como un enlace cuando la etiqueta de anclaje viene dentro de la respuesta de la cadena
Soy nuevo en reaccionar js y cambiar nuestro código de Freemarker para reaccionar. Obtengo una respuesta de cadena Json que contiene etiquetas de anclaje, cuando renderizo esta cadena en reaccionar js en el navegador, muestra la etiqueta de anclaje como texto sin formato, no como un enlace.
Respuesta:
{ "type": "paragraph", "paragraph": { "body": " <p> <a href=\"http://stg-testing.com/new-cars/jaguar\" target=\"_blank\">Jaguar</a> <a href=\"http://stg-testing.com/new-cars/landrover\" target=\"_blank\">Land Rover</a> has officially taken the covers off the fifth generation Range Rover SUV which now comes with a new look, new engine options and loaded with new technology with features galore. </p>" } }Código ReactJS:
<div className="StoryBodyContent" id={`story_$${storyData.id}`}> {storyData.listElement.map(element => ( <p>{element.paragraph.body.replace("<p>","").replace("</p>","")}</p> )) } </div> Salida de ReactJS: 
Rendimiento esperado: 
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Una mejor implementación sería obtener los datos que pasa a su etiqueta y transferirlos a sus datos JSON como propiedades adicionales en lugar de pasar toda la etiqueta de anclaje con datos dentro.
Código refactorizado:
DATOS JSON:
{ "type": "paragraph", "paragraph": { "body": { "firstLink" : "http://stg-testing.com/new-cars/jaguar", "secondLink" : "http://stg-testing.com/new-cars/landrover", "firstLinkText" : "Jaguar", "secondLinkText" : "Land Rover", "children" : has officially taken the covers off the fifth generation Range Rover SUV which now comes with a new look, new engine options and loaded with new technology with features galore" } } }REACCIONAR.JS
<div className="StoryBodyContent" id={`story_$${storyData.id}`}> {storyData.listElement.map(element => ( <p><a href={element.paragraph.body.firstLink}> {element.paragraph.body.firstLinkText} </a> <a href={element.paragraph.body.secondLink}> {element.paragraph.body.secondLinkText} </a> {children} </p> )) } </div>
·
Juan Pablo Isaza
Denunciar
0
Intente configurar el HTML interno en lugar de representarlo como una cadena.
<p dangerouslySetInnerHTML={ element.paragraph.body.replace("<p>","").replace("</p>","") }></p>Lea la documentación para más detalles.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta