Digamos que tengo una cadena en React "x {y} z" y me gustaría reemplazar dinámicamente {y} con un hipervínculo con target = "ylink" Tanto y como ylink serían dinámicos, por ejemplo, habría un objeto con el texto para reemplazar (y) y el destino del hipervínculo (enlace). ¿Es posible hacer esto?
Sí, es posible, puedes hacerlo como se muestra a continuación.
const getLink = ({href, name}) => { return( <a href={href} >{name}</a> ) } x {getLink({href: "google.com", name:"y"})} z // your react string goes hereIntente crear un componente CustomLink personalizado. Usando el enfoque de componente funcional:
const CustomLink = (linkTarget, displayString) => <a href={linkTarget}>{displayString}</a>;Además, puede agregar propiedades a la etiqueta de anclaje como, por ejemplo , rel, accesorios de destino (consulte la documentación: https://www.w3schools.com/tags/tag_a.asp ). Finalmente, puede evaluar su cadena solicitada, pero le recomiendo usar JSX si desea mostrarla en DOM:
const requestedJSX = <div><span>x {<CustomLink linkTarget='ylink' displayString='y'/>} z</span></div>;Span está ahí para la retención de espacios en blanco; siéntase libre de no usarlo de acuerdo con sus necesidades. Si está trabajando con una aplicación de una sola página usando rutas y diferentes páginas/vistas, un buen enfoque es elegir la biblioteca de enrutador de reacción y crear sistemas de enlace usando el componente de enlace disponible de react-router-dom (solo impórtelo). He nombrado el código de la etiqueta de anclaje personalizado anterior diferente de "Enlace" para que no se mezcle con el nombre de importación del enrutador de reacción.
Ejemplo: tenga en cuenta que el enfoque de enrutador de reacción no funciona a menos que configure completamente el enrutador de reacción.
import { Link } from "react-router-dom"; const requestedContent = <div>X <Link to='ylink'>Y</Link> Z</div>;