Как настроить третью сторону Реагистрационные компоненты

Джейкоб Гох

Библиотеки компонентов делают нашу жизнь проще.

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

Мы остались с 2 вариантами:

1. Напишите компонент с нуля себя
2. Настроить сторонние компоненты

Что выбрать, зависит от компонента и ситуации, в которой вы находитесь.

По-видимому, некоторые компоненты не настраиваются, а некоторые требования к функциям не осуществимы. Но большую часть времени на заказ сторонних компонентов является менее трудоемким вариантом. Вот как.

Прежде чем начать

Например, мы собираемся настроить React-bootstrap-Typeahead составная часть.

Вот стартер, если вы хотите следовать вдоль https://stackblitz.com/edit/react-hznpca

1. Перезапись CSS.

Это довольно просто.

Просто узнайте, какие классы CSS компонента являются и перезаписывают их новыми CSS.

Пример

Цель: Добавьте раскрывающийся значок в поле ввода, чтобы он выглядел как раскрывающийся.

Просто добавьте шрифт потрясающий на index.html.

и добавить эту CSS на style.css

Демо: https://stackblitz.com/edit/react-wdjptx

2. Компонент обертки

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

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

Этот компонент Wrapper не имеет никакого эффекта. Это просто проходит реквизит до компонента Typeaphead.

Мы собираемся настроить поведение компонентов, внес изменения в реквизит Отказ

Пример: Настройка реквизита по умолчанию

Цель: Добавление реквизит по умолчанию

Давайте начнем с простейшей настройки.

Допустим, мы хотим все Индивидуальные стерлинговэада иметь Clearbutton опоры включены по умолчанию.

Мы можем сделать это:

Это эквивалентно:

Мы создаем инъекционныеProps и поставит все реквизит модификация внутри, чтобы сделать код управляемым.

Демо: https://stackblitz.com/edit/react-tk9pau.

Пример: модифицирующие реквизиты

Цель: Сортировать все варианты по алфавиту

Мы получаем Варианты , который является массивом объектов, а LabelKey , что говорит нам, что этикетка варианта должна быть OptionObject [Labelkey] Отказ Наша цель – сортировать OptionObject [Labelkey] по алфавиту.

Мы можем сделать это, используя Array.prototype.sort () сортировать Варианты множество.

Таким образом, Варианты в инъекционныеProps будет перезаписать оригинал Варианты в реквизит

Демо: https://stackblitz.com/edit/react-cqv5vz.

Пример: Перехватывающие слушатели событий

Цель: Когда пользователь выбирает опцию, если пользователь выбрал как «California», так и «Texas» вместе, предупредить пользователя и очистить выбор (без особой причины, кроме этой демонстрации).

Это веселая часть, где вы можете делать много настройки.

В основном, вот как это будет работать:

Обратите внимание на Если (OnChange) Onchange (выделенные формы); Отказ Это гарантирует, что оригинальный слушатель события Onchange продолжает работать после того, как мы перехватываем его.

Вот что мы сделали в коде выше:

1. Мы создаем Onchange Функция, которая имеет той же структуры по умолчанию Onchange функция. Это функция, которая получает массив выбранных вариантов.
2. Мы сканируем через выбранные параметры и проверьте, действительно ли это.
3. Если он недействителен, показать предупреждение и очистить вход
4. Запустите оригинал Onchange Слушатель событий

Демо: https://stackblitz.com/edit/react-ravwmw

3. Изменение исходного кода

ВНИМАНИЕ! Не злоупотребляйте это! Это ваш последний курорт. Вы должны сделать это только в том случае, если нет другого выбора.

Если ни одно из вышеперечисленных не работает для вас, варианты, которые вы имеете в настоящее время ограничены:

• Найти другую компонентную библиотеку
• Напишите свой собственный компонент с нуля
• Измените исходный код компонента

На самом деле не редкость, что вам может придеться модифицировать исходный код пакета, чтобы соответствовать потребностям проекта. Особенно, если вы нашли ошибку в пакете, и вам нужно срочно исправить.

Но есть несколько минусов:

• Некоторые пакеты используют разные языки, такие как CoffeeScript или Teadercript. Если вы не знаете языка, вы не знаете, как его редактировать.
• Это может быть потребляемое время для изучения исходного кода и выяснить, где именно может поместить вашу модификацию.
• Вы можете непреднамеренно сломать часть пакета.
• Когда обновляется пакета, вам нужно будет применить обновление вручную.

Если вы решите пойти дальше и сделать некоторые модификации исходного кода, вот как.

1. Вилка репозиторий GitHub

В нашем примере, иди на https://github.com/icio/react-bootstrap-typeahead и вилком репо на свой собственный аккаунт GitHub.

2. Клонировать репо на вашу машину

3. Сделать модификацию

4. Нажмите РЕПО на ваш аккаунт GitHub

5. Установите репо как зависимость

После вилки репо, ваш URL Regub Reppo должен быть https://github.com//React-Bootstrap-Typ Eahead.

Вы можете установить это Git Repo в качестве зависимости, выполнив эту команду:

npm i https://github.com//react-bootstrap-typeahead

После установки вы должны увидеть это в Package.json:

"dependencies": {     "react-bootstrap-typeahead": "git+https://github.com//react-bootstrap-typeahead.git" }

Заключение

Мы говорили о трех способах настроить ваши третьими к компонентам реагирования.

1. Перезапись CSS.
2. Используя компонент обертки
3. Изменение исходного кода

Надеюсь, это делает вашу жизнь как разработчик реагирования легче.

Тем временем давайте все найду минутку и будем благодарны всем создателям/участникам открытых источников. Без этих пакетов с открытым исходным кодом мы не сможем двигаться так быстро, как мы делаем сегодня.

Какой твой опыт работы с библиотеками сторонних компонентов? Какие другие методы вы бы использовали для их настраивания? Оставить комментарий!

Первоначально опубликовано dev.to .

Оригинал: “https://www.freecodecamp.org/news/how-to-customize-your-third-party-react-components-e0afd88532c9/”