React-Virtuoso. Проблема с использованием его вместе с кадром ⇐ Javascript

[Anonymous]

Я внедрил виртуальный список, используя библиотеку React-Virtuoso. Этот список отображается в модальном окне, а само-модальное окно имеет анимированный внешний вид и исчезновение, которые я реализовал с помощью фреймер-мотиющего. Но как только я закрываю модальное окно, я получаю ошибку в консоли .:

Код: Выделить всё

hook.js:608 react-virtuoso: Zero-sized element, this should not happen
< /code>
modal < /p>
import { FC } from 'react'
import ReactDOM from 'react-dom'
import clsx from 'clsx'
import { AnimatePresence, motion, Variants } from 'framer-motion'
import { useAppDispatch, useAppSelector } from '../../store/hooks'
import { closeModal } from '../../store/slices/UISlice'

import styles from './Modal.module.sass'

interface ModalProps extends React.PropsWithChildren {
className?: string
}

const overlayVariants: Variants = {
initial: {
opacity: 0,
},
animate: {
opacity: 1,
},
}

const wrapperVariants: Variants = {
initial: {
opacity: 0,
scale: 0,
fill: 'blur(5px)',
transition: {
duration: 0.5,
ease: [1, 0, 0, 1],
},
},
animate: {
opacity: 1,
scale: 1,
filter: 'blur(0px)',
transition: {
duration: 0.5,
ease: [1, 0, 0, 1],
},
},
}

export const Modal: FC = ({ className, children }) => {
const { isModalOpen } = useAppSelector((state) => state.UISlice)
const dispatch = useAppDispatch()

return ReactDOM.createPortal(

{isModalOpen && (
 dispatch(closeModal())}
>
 e.stopPropagation()}
>
{children}


)}
,
document.body
)
}
< /code>
Компонент с React-virtuoso < /p>
import { FC } from 'react'
import { motion, Variants } from 'framer-motion'

import styles from './CryptoList.module.sass'
import clsx from 'clsx'
import { Virtuoso } from 'react-virtuoso'
import { IToken } from '../../models/tokenTypes'
import { IOptions } from '../CryptoAddPopup/CryptoAddPopup'

interface CryptoListProps {
className?: string
filteredCrypto: IToken[]
setOptions: React.Dispatch
setTokenCount: React.Dispatch
setIsOptionsVisible: React.Dispatch
}

const listVariants: Variants = {
initial: {
opacity: 0,
},
animate: {
opacity: 1,
},
}

export const CryptoList: FC = ({
className,
filteredCrypto,
setOptions,
setTokenCount,
setIsOptionsVisible,
}) => {
return (

 (
[*]                        className={styles.item}
key={token.symbol}
onClick={() => {
setOptions(() =>  ({
token: token.token,
tokenPrice: token.price,
priceChangePercent: token.priceChangePercent,
symbol: token.symbol,
totalPrice: 0,
}))
setTokenCount(1)
setIsOptionsVisible(true)
}}
>
{token.token}
{token.price.toFixed(2)}$
className={clsx(
styles.percent,
token.priceChangePercent < 0 && styles.red
)}
>
{token.priceChangePercent > 0 && '+'}
{token.priceChangePercent.toFixed(2)}%

)}
/>

)
}
< /code>
Если я переписываю модальное окно, как это, я избавлюсь от этой ошибки, но я также потеряю плавное закрытие модального, потому что я удаляю тег AnimatePresence. Я вообще не хочу терять анимацию = (< /p>
import { FC } from 'react'
import ReactDOM from 'react-dom'
import clsx from 'clsx'
import { AnimatePresence, motion, Variants } from 'framer-motion'
import { useAppDispatch, useAppSelector } from '../../store/hooks'
import { closeModal } from '../../store/slices/UISlice'

import styles from './Modal.module.sass'

interface ModalProps extends React.PropsWithChildren {
className?: string
}

const overlayVariants: Variants = {
initial: {
opacity: 0,
},
animate: {
opacity: 1,
},
}

const wrapperVariants: Variants = {
initial: {
opacity: 0,
scale: 0,
fill: 'blur(5px)',
transition: {
duration: 0.5,
ease: [1, 0, 0, 1],
},
},
animate: {
opacity: 1,
scale: 1,
filter: 'blur(0px)',
transition: {
duration: 0.5,
ease: [1, 0, 0, 1],
},
},
}

export const Modal: FC = ({ className, children }) => {
const { isModalOpen } = useAppSelector((state) => state.UISlice)
const dispatch = useAppDispatch()

if (!isModalOpen) return null

return ReactDOM.createPortal(
 dispatch(closeModal())}
>
 e.stopPropagation()}
>
{children}

,
document.body
)
}

Возможно, кто-то уже столкнулся с такой проблемой, пожалуйста, помогите мне решить эту проблему без потери анимации от AnimatePresence
github Repo этого проекта https://github.com/sparkkkd/crypto-portfolio>

Подробнее здесь: https://stackoverflow.com/questions/795 ... mer-motion