React-Slick - отличная функция, которая позволяет пользователям с легкостью создавать и настраивать карусели. Это надежная документация и действительно хорошо обслуживаемый проект. Сказав это, он не лишен недостатков. А именно, при использовании React-Slick-Slider для текущего проекта я заметил, что когда я хотел использовать функциональность prevArrow / nextArrow, доступную в пакете (v 0.16.0), я получал довольно странные консольные ошибки:

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

Что такое ошибка

Чтобы понять, как устранить предупреждение, мы должны сначала понять, о чем оно нам сообщает. Почему компонент, допускающий настройку, должен выдавать предупреждение при использовании этой функции? Проще говоря, это потому, что созданный нами компонент неправильно обрабатывает свойства, полученные от слайдера. Это означает, что свойства по умолчанию, передаваемые от Slider к его собственным стрелкам, должны быть обработаны.

Поиск решения

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

Мы знаем, что для устранения предупреждений мы должны сначала обработать свойства, передаваемые от ползунка вниз к нашим настраиваемым компонентам стрелок. Давайте продолжим и реорганизуем наш существующий код, чтобы имеющаяся у нас функция находилась за пределами класса. Мы можем сделать это, создав отдельный компонент в другом файле, или мы можем просто создать функцию, которую затем сможем вызвать внутри нашего Компонента. Я предпочитаю второй вариант, поскольку он позволяет нам аккуратно хранить все функции карусели в одном компоненте, однако, если вы собираетесь повторно использовать эти стрелки, может быть полезно иметь их как отдельные компоненты. Давайте посмотрим на наше реорганизованное решение:

Как видите, мы удалили нашу предыдущую функцию renderArrows из компонента React вовне. Опять же, мы делаем это, чтобы мы могли обрабатывать реквизиты, основанные на родительском слайдере. В частности, мы знаем, что должны обрабатывать передаваемую функцию onClick. Кроме того, поскольку у нас больше нет доступа к нашему предыдущему свойству темы, которое предоставляло наш собственный стиль, мы должны передать его через слайдер, например:

Теперь, если мы повторно запустим наш проект, вы увидите, что ошибок больше нет, и мы можем перейти к тому, чего еще требует наш проект.

И вот оно! Если у вас есть какие-либо вопросы, дайте мне знать, и я буду рад помочь любым возможным способом!