Введение

В этой статье мы рассмотрим, как создать универсальный компонент публикации в 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 и targertprops в соответствии со своими потребностями.

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

Получайте удовольствие от создания своих компонентов и приложений и удачного кодирования!