Вставка Next.js Ссылки в HTML-строку

#javascript #reactjs #jsx #next.js

#javascript #reactjs #jsx #next.js

Вопрос:

У меня есть строка html, которую я извлекаю из API.

 const htmlString = "<p>Hello World</p>";
 

Я использую react dangerouslySetInnerHTML для отображения этого содержимого на своей странице.

Теперь, прежде чем отображать его, я хотел бы обработать его и поместить ссылку на «Мир«. Но не <a> тег. Мне нужен фактический Next.js <Link> бирка. Таким образом, замена строки, вероятно, не выполнит эту работу.

Результат, которого я хочу достичь в jsx,:

 const processed = <p>Hello <Link href="/my-route"><a>World</a></Link></p>
 

Я думал об использовании React.createElement, но я не уверен, как интерполировать содержимое внутри строки.

Есть идеи, как я мог бы этого добиться?

Ответ №1:

 Hello<Link href="https://github.com">World</Link> 

Вам не нужно указывать другой тег привязки внутри ссылки. Это должно работать нормально.