react-spring как использовать анимацию (компонент)

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

Компонент реакции, очевидно, помещен внутрь не просто для удовольствия, но, к счастью, react-spring позволяет анимировать пользовательский компонент, выполнив

const AnimatedComponent = animated(Component)

согласно документам

Но как мне это использовать? Я пытался, но машинописный текст дает действительно бесполезное сообщение об отсутствии 269 различных типов реквизита.

EDIT добавлена ​​ошибка

Ошибка машинописного текста отображается vscode, но это может быть неважно. Поскольку я понятия не имею, какие реквизиты передать для анимации компонента, я не удивлен, что он не работает, но сообщение об ошибке на самом деле не помогает в определении того, что мне нужно делать.

' is missing the following properties from type 'AnimatedProps<{ title: string | FluidValue<string, any>; id: string | FluidValue<string, any>; article?: { title: string; metaTitle: string; metaDescription: string; description: string; showRelatedArticles: boolean; elements: ({ ...; } | ... 4 more ... | { ...; })[]; } | null | undefined; ... 269 more ...; key?: st...': title, id, slot, animate, and 257 more.ts(2740)

Я снял некоторые из первых опор, так как узнаю их по компоненту, который пытаюсь оживить, и знаю, что они присутствуют.

Кто-нибудь пробовал использовать это? Было бы неплохо на примере того, как его использовать.

Я использую 9.0.0-rc.3 версию react-spring, если это имеет значение.


reactjs typescript javascript react-spring
person Mathias Nielsen    schedule 17.06.2020    source источник
comment
Откуда вы берете машинописное сообщение и что это именно?   -  person Peter Ambruzs    schedule 17.06.2020
comment
@PeterAmbruzs Я добавил сообщение об ошибке   -  person Mathias Nielsen    schedule 17.06.2020
comment
Да, я знаю, как создать настраиваемый анимированный компонент, но не знаю, как изменить настраиваемый компонент таким образом, чтобы анимация работала. Должен быть передан какой-то реквизит или что-то еще. Как анимированный компонент знает, что визуализировать, когда он анимируется?   -  person Mathias Nielsen    schedule 17.06.2020
comment
@PeterAmbruzs Я не знаю, почему вы удалили свой ответ. Я собирался принять это как правильное. У меня было очевидное решение, но что-то еще сломало его, и я подумал, что должен быть другой способ сделать это.   -  person Mathias Nielsen    schedule 18.06.2020
comment
Мне просто показалось, что в такой форме это слишком банально. Я разместил это как начало разговора, чтобы разгадать вашу проблему. Я восстановил его.   -  person Peter Ambruzs    schedule 18.06.2020

Ответы (1)


arrow_upward
-1
arrow_downward

Просто чтобы начать разговор.

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

const AnimatedDonut = animated(Donut)
// ...
const props = useSpring({ value: 100, from: { value: 0 } })
return <AnimatedDonut percent={props.value} />

Это где проблема?

person Peter Ambruzs    schedule 17.06.2020
comment
Я просто застрял в этой же проблеме, но случай со мной - мой пользовательский компонент имеет 6 реквизитов, которые мне нужны для рендеринга компонента, но не имеют ничего общего с анимацией. тогда как мне передать это? - person Soumalya Bhattacharya; 01.12.2020
comment
@SoumalyaBhattacharya Новый анимированный компонент имеет те же свойства, что и исходный компонент. Вам просто нужно переключить новый компонент с такой же подписью. - person Peter Ambruzs; 01.12.2020