Введение
В этой статье мы рассмотрим, как создать универсальный компонент публикации в React, который поддерживает навигацию по ссылкам и обработку событий onClick. Кроме того, мы обеспечим возможность выбирать и копировать текст в сообщении, не запуская навигацию по ссылкам.
Демонстрация и ресурсы
Прежде чем мы углубимся в детали, вы можете посмотреть живую демонстрацию компонента PostWrapper
в действии в CodeSandbox. Исходный код компонента доступен на GitHub, а пакет npm можно найти здесь.
Постановка задачи №1: Конфликт выделения текста и навигации по ссылкам
Мы столкнулись с конфликтом между выделением текста и навигацией по ссылкам при реализации компонента записи. По умолчанию, когда пользователи выбирают текст в сообщении, браузер запускает поведение навигации по ссылкам, мешая предполагаемой функции выбора текста.
Решение. Предотвратите навигацию по ссылке при выделении текста.
Чтобы решить эту проблему, мы интегрировали следующую логику в компонент PostWrapper
:
const selection = window.getSelection(); const textIsSelected = selection && selection.toString().length > 0; if (textIsSelected) return;
Этот фрагмент кода проверяет, выделен ли какой-либо текст в сообщении. Если есть выделение, навигация по ссылкам игнорируется, что позволяет пользователям свободно выбирать и копировать текст, не вызывая непреднамеренной навигации.
Внедрив это решение, мы обеспечиваем бесперебойную работу для пользователей, которые хотят взаимодействовать с содержимым публикации, выбирать текст и копировать его без перенаправления на цель ссылки.
Постановка задачи №2: Обработка кликов по ссылкам внутри поста
Еще одна проблема, с которой мы столкнулись, заключалась в обработке кликов по ссылкам внутри поста. Мы хотели гарантировать, что, когда пользователи нажимают на ссылку в сообщении, навигация по ссылке будет происходить, как и ожидалось, без каких-либо помех от поведения клика в сообщении.
Решение: включение навигации по ссылкам внутри поста
Чтобы решить эту проблему, мы реализовали следующую логику в компоненте PostWrapper
:
const postLinkClicked = clickedElement.closest("a") !== null; if (postLinkClicked) return;
Этот фрагмент кода проверяет, является ли выбранный элемент тегом <a>
или потомком тега <a>
. Мы разрешаем переход по ссылкам без дальнейшей обработки, если это необходимо.
Это решение гарантирует, что ссылки внутри сообщения ведут себя так, как ожидалось, позволяя пользователям переходить по указанным URL-адресам без вмешательства логики обработки кликов в сообщении.
Постановка задачи №3: Обработка кликов по внутренним элементам с помощью обработчиков onClick
Мы также столкнулись с проблемой обработки кликов по внутренним элементам поста, у которых есть собственные обработчики onClick
. В этом сценарии мы хотели гарантировать, что обработчик onClick
внутреннего элемента будет выполняться без запуска навигации по ссылке, определенной свойством ссылки компонента PostWrapper
.
Решение: предотвращение навигации по ссылкам и выполнение обработчика onClick
Чтобы решить эту проблему, мы улучшили логику обработки кликов в компоненте PostWrapper
следующим образом:
const isChildClicked = wrapperRef.current?.contains(clickedElement) && Boolean(clickedElement?.onclick); if (isChildClicked) return;
Включив это решение, мы проверяем, является ли выбранный элемент потомком элемента-оболочки и имеет ли он ненулевое свойство onclick
. Если оба условия соблюдены, мы разрешаем выполнение обработчика onClick
внутреннего элемента без запуска перехода по ссылке.
Это усовершенствование гарантирует, что внутренние элементы со своими собственными обработчиками onClick
могут функционировать независимо внутри компонента PostWrapper
, не мешая навигации по ссылкам.
Постановка задачи №4: Поддержка одновременного использования переходов по ссылкам и событий onClick
Еще одним требованием, которое у нас было, была возможность использовать как навигацию по ссылкам, так и одновременное событие onClick
для конкретных случаев использования. Мы хотели, чтобы пользователи могли определять собственные действия, такие как события аналитики при нажатии на публикацию.
Решение: включение передачи событий Analytics или пользовательских действий через обработчик onClick.
Чтобы выполнить это требование, мы расширили существующую логику обработки кликов в компоненте PostWrapper
, чтобы разрешить передачу событий аналитики или пользовательских действий через обработчик onClick
. Пользователи могут определить желаемые действия в функции onClick
, переданной компоненту.
Например:
<PostWrapper className="post-wrapper" link="https://example.com" target="_blank" onClick={(event) => { // Custom analytics event analytics.track('PostClicked', { postId: postId }); // Additional custom actions // ... }} > {/* Post content */} </PostWrapper>
Используя свойство onClick
, пользователи могут определять свои собственные обработчики событий и запускать настраиваемые действия вместе с навигацией по ссылкам или вместо нее.
Эта гибкость позволяет пользователям беспрепятственно включать отслеживание, аналитику или другую пользовательскую логику в компонент PostWrapper
.
Применение
Пакет react-clickable-post-wrapper
npm предоставляет гибкое и универсальное решение для упаковки элементов записей в интерактивный контейнер. Этот компонент позволяет обрабатывать щелчки по внутренним элементам, переходить к назначенному URL-адресу при нажатии на оболочку и поддерживать одновременное использование навигации по ссылкам и пользовательских событий onClick
. Установка
Монтаж
Вы можете установить пакет через npm:
npm install react-clickable-post-wrapper
Пример использования
Вот пример того, как вы можете использовать компонент PostWrapper
:
import React from "react"; import PostWrapper from "react-clickable-post-wrapper"; const MyPost = () => { const handlePostClick = () => { console.log("Post clicked!"); }; return ( <PostWrapper className="post-wrapper" link="https://example.com" target="_blank" onClick={handlePostClick} > {/* Your post content */} </PostWrapper> ); };
В приведенном выше примере компонент PostWrapper
используется для переноса содержимого публикации. Щелчок по оболочке запускает функцию handlePostClick
, и если щелчок не обрабатывается или не предотвращается, выполняется переход по указанной ссылке.
Вы можете настроить className
,link
и targert
props в соответствии со своими потребностями.
Мы надеемся, что эта статья поможет вам в разработке ваших компонентов и приложений. Не стесняйтесь комментировать, если у вас есть какие-либо предложения по улучшению компонента.
Получайте удовольствие от создания своих компонентов и приложений и удачного кодирования!