Здравствуйте.
--
Согласно документации
https://nextjs.org/docs/api-reference/next/link
Чтобы страница не перезагружалась, нужно оборачивать тег a в
<Link> компонент.
Чтобы код из
.md файла, или из
json API был преобразован из строки в html код
есть такое свойство
dangerouslySetInnerHTML={{__html: data}}
Которое работает и в React.js и в Next.js, то есть с этим проблем нет.
Возникает следующая ситуация, в передаваемом html есть ссылки, причём обычные и динамичные с параметрами:
<li>
<Link href="/about">
<a>About Us</a>
</Link>
</li>
<li>
<Link href="/blog/hello-world">
<a>Blog Post</a>
</Link>
</li>
При чём, самые неудобные ссылки - динамические
<Link href="/dashboard/product/[href]" as={`/dashboard/product/${item.href}`}>
<a>Open<a>
</Link>
Потому что им нужно явно указать шаблон для отображения и параметры.
Таким образом мы имеем html код с cсылками, которые по клику не должны перезагружать страницу.
Есть лёгкий путь, создать шаблон, и передавать параметры в нужные места, так мы получаем и реактивные ссылки и текст, ну и может быть картинки и видео, либо идти по более сложному пути и сделать что-то по типу Backend Driven UI, тогда такой контент будет "послушным" и в мобильных приложениях. Как я понимаю и вижу решение. Мы как-то распарсим полученный
html код на данные, как если бы получили массив, где через запятую перечислили что мы имеем, потом полученный массив отдаём в специальную функцию, которая раскладывает данные по полочкам:
['text'], ['link'], ['text'], ['text'], ['image'], ['text'], ['video'], ['text']
По итогу в исходном коде по нашей схеме получится что-то типа:
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p>
<a href="#">Duis</a>
<p>aute irure dolor in reprehenderit.<p>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse<p>
<img src="image.jpg" alt="image" />
<p>a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure.</p>
<video src="https://youtu.be/r5iWCtfltso"></video>
<p>Irure dolor in reprehenderit.<p>
</div>
Для тех кто не понял, зачем я это делаю, поясню, что не всегда удобно работать с html, и иногда бывает потребность в генерации динамического контента (яркий пример сайт facebook, который кстати сделан на Next.js), делать шаблоны, это не выход, тем более что, если к примеру делать блог, то будет странно видеть текст в однотипном формате, посмотрите статьи на Хабре, они ведь оформляют контент как попало, тексты, ссылки и картинки находятся в произвольных местах, и это то что нужно в конечном итоге.
Уверен, что с этим сталкивался не только я.
Вопрос:
Есть ли какое-то готовое решение, которое парсит html код с сервера и преобразует в некий массив, чтобы потом было удобно укладывать это в JSX, или в компоненты Swift, React Native, Flutter
Или Backend-Driven UI или только для мобильной разработки ???
Благодарю за интерес к вопросу и развёрнутые ответы :)
