Afficher les liens du texte dans react

Question

J'ai créé un système de balisage où l'utilisateur peut étiqueter d'autres utilisateurs dans le texte avec la notation @, j'enregistre tout le tweet inn db, mais lors de la récupération, je reçois un texte affiché comme celui-ci

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

Comment le faire afficher comme

Hi My first tweet [@ron][1]  

où @ron est un lien

Answer 1

Vous pouvez utiliser dangerouslySetInnerHTML.

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

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

Remarque : assurez-vous d'importer Linkdepuis react-router. Gardez également à l'esprit que cela est risqué en raison d'une attaque XSS potentielle.

Answer 2

// 1. créer un composant

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