Отображать ссылки из текста в React

Question

Я создал систему тегов, в которой пользователь может помечать других пользователей в тексте с помощью обозначения @, я сохраняю весь твит inn db, но при извлечении я получаю текст, отображаемый следующим образом

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

Как сделать так, чтобы он отображался как

Hi My first tweet [@ron][1]  

где @ron - ссылка

Answer 1

Вы можете использовать dangerouslySetInnerHTML.

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

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

Примечание . Обязательно импортируйте Linkиз react-router. Также имейте в виду, что это рискованно из-за потенциальной атаки XSS.

Answer 2

// 1. создаем компонент

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