Создайте радиогруппу с помощью React, styled-components и Framer Motion
В части 1 и части 2 мы рассмотрели базовую структуру, правила доступности, обработку выбранного состояния, события щелчка и нажатия клавиш и многое другое. Если вы не читали их, я бы посоветовал сделать это, прежде чем продолжить здесь.
Давайте быстро взглянем на то место, где мы оставили часть 2. Вы можете найти код здесь.
Вы можете видеть, что я создал styled.tsx файл, в который я поместил все свои стилизованные компоненты. Я рассматриваю этот файл как файл CSS. Все остальное осталось прежним.
8. Анимируйте с помощью Framer Motion
Framer Motion на данный момент, на мой взгляд, лучшая библиотека анимации для React. Он является преемником Pose и был создан тем же автором (Мэтт Перри), а также несколькими превосходными инженерами Framer.
Приступим к анимации. Мы собираемся анимировать Circle границу, когда выбран параметр, и наоборот.
Во-первых, мы должны определить variants анимации. * Примечание: вы можете получить тип Variant из библиотеки framer-motion.
Затем мы должны изменить базу компонента Circle на motion.div вместо обычного элемента div. Я выделил важные строки:
И мы должны удалить ранее выбранную стратегию из компонента Option:
Теперь мы можем изменить логику, в которой Circle оформляется как выбранный. Я извлек логику isSelected и затем передал ее aria-checked. Выделены важные строки:
В приведенном выше примере мы говорим компоненту Circle (который имеет тип motion.div на этом этапе), что он может использовать указанные нами варианты (начальный и выбранный).
Мы говорим ему, что он должен запустить компонент с вариантом initial, и если он выбран, он должен использовать вариант selected, если нет, то вариант initial. На мой взгляд, это довольно простой API, который работает.
9. Контролируемый и неконтролируемый
Если вы проверите наш компонент, он находится в таком странном состоянии, когда мы контролируем selectedId изнутри, не передавая его. Это не было ни контролируемым, ни неконтролируемым.
Это было сделано так, чтобы мы могли сосредоточиться на логике внутри компонента и не беспокоиться о том, как мы его вызываем. Давайте сконцентрируемся на последнем шаге этой серии, чтобы правильно его контролировать.
Во-первых, давайте добавим дополнительные реквизиты:
Тогда давайте назовем это:
Теперь давайте удалим состояние для selectedId, потому что мы собираемся получить его из переданного значения из props.
И мы также должны изменить функцию setSelectedId на onChange, потому что теперь мы ожидаем, что пользователь компонента установит значение извне.
Заключение
Остается рабочий компонент. Вы можете изменить его столько, сколько захотите, в соответствии с вашими потребностями.
Вы можете найти готовый код здесь.
Как всегда, спасибо за чтение. Если я что-то пропустил или что-то не так, дайте мне знать. Я сделаю все возможное, чтобы эта страница постоянно обновлялась.
