Visualizza collegamenti dal testo in React

Question

Ho creato un sistema di tagging in cui l'utente può taggare altri utenti nel testo con la notazione @, sto salvando l'intero tweet inn db, ma durante il recupero ricevo un testo visualizzato come questo

Hi My first tweet<Link to='/userprofile/ron'> @ron</Link>

Come renderlo visualizzato come

Hi My first tweet [@ron][1]  

dove @ron è un collegamento

Answer 1

Puoi usare dangerouslySetInnerHTML.

const text = "Hi My first tweet<Link to='/userprofile/ron'> @ron</Link>";

<div dangerouslySetInnerHTML={{ __html: text }} />

Nota : assicurati di importare Linkda react-router. Tieni inoltre presente che questo è rischioso a causa di un potenziale attacco XSS.

Answer 2

// 1. crea componente

let linkItem = (props) => <p>Hi My first tweet <Link>{props.name}</Link></p>