Как визуализировать компонент Link-router? - PullRequest
Новая
       10

Как визуализировать компонент Link-router?

1 голос
/ 17 июня 2019

Вот моя ситуация:

Это одностраничное приложение, которое использует react-router-dom для выполнения маршрутизации на стороне клиента.

У меня есть AddBlogPostPageгде admin создаст blogPosts.

  • Эта страница содержит множество входных данных и текстовых полей для построения blogPost абзацев и изображений.
  • ВнутриПри вводе textarea администратор будет вводить текст абзаца, который будет отображаться внутри тега <p> , используя dangerouslySetInnerHTML при отображении blogPost.
  • Ноиногда необходимо добавить ссылки на другие страницы приложения, и я делаю следующее:
  • Администратор вводит в textarea:
    • Например: текстовый шаблон[products](/products)
    • И это заменяется и отображается как <a href="/products">products</a>

Но когда я нажимаю на <a>, приложение обновляет другиечем переключать маршруты с react-router-dom. То есть , потому что я использую тег <a> вместо Link компонента , который поставляется со react-router-dom.

Но так как я отрисовываю свои абзацы с помощью dangerouslySetInnerHTML, как я могу отобразить компонент React Link вместо html-тега <a> в этой ситуации?

Из моего исследования такпока что это не представляется возможным.Есть ли другой способ обойти это?

1 Ответ

1 голос
/ 17 июня 2019

Я совершенно уверен, что это не самый эффективный способ сделать это, и при этом это не действительно многократное использование.Но вот, по крайней мере, отправная точка.

Вы храните эту текстовую информацию в состоянии, я полагаю.При рендеринге из состояния FROM используйте 

const firstText = this.state.userText.split('[products]');

, чтобы получить все до тега, затем 

const lastText = firstText[1].split('[/products]');

, чтобы получить все после ссылки.Ваш рендер будет выглядеть примерно так: 

<p>
    {firstText[0]}
    <Link to="/products">{lastText[0]}</Link>
    {lastText[1]}
</p>

Для реального случая использования вы захотите сохранить его в состоянии, отследить, что и где находятся все ваши теги, и выбросить все в массивв отдельной записи состояния, так что вы можете отобразить выход соответствующим образом.Это, несомненно, будет метод вместо серии объявлений переменных.И я уверен, что это не очень эффективно.Но это не невозможно!

Удачи.

...