Реагировать компоненты для выделения текста и перезагрузки из файлов

Question

Я работаю над созданием подсветки текста со следующими функциями:

• Позволяет пользователям выбирать и выделять / отменять выделение текста на страница с разными цветами.
• Загрузка основных моментов из файла (найдите слова из файла на странице и выделите их).

Мне удалось создать функцию выделения и удалить выделение, используя rangy https://github.com/timdown/rangy (который не является компонентом реакции), но всякий раз, когда какой-либо компонент на странице устанавливает состояние с помощью (метод setState), эти выделения исчезают.

Кроме того, ранее выделенные элементы нелегко загружаются на страницу с помощью этого метода.

Вот почему я снова перерабатываю эту функциональность и хочу знать, каков был бы правильный подход к решению этой проблемы?

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

Ссылка на полезный ресурс о том, как добавлять динамические компоненты, была бы удобна для меня, поскольку я некоторое время искал правильный способ решения этой проблемы, и я думаю, что, возможно, я движусь не в правильном направлении.

Answer 1

React переопределяет все, что изменилось.Это приведет к тому, что ваше выделение исчезнет, ​​так как элементы не одинаковы, даже если они выглядят одинаково.

Реакция будет также интеллектуально не повторно визуализировать, если вы установите уникальный ключ свойство во многих случаях.Это позволяет React знать, что можно повторно использовать компонент.

Если состояние корректно меняется, и вы хотите предотвратить повторную визуализацию только иногда, вам следует реализовать метод жизненного цикла shouldComponentUpdate для управленияПерерисовать условия самостоятельно.