问题很可能是由于 React 版本不同引起的。在 React v17.0.x 中,AnimatePresence 组件仅在使用 React DOM v18.x 时始终正常工作。因此,我们需要确保我们在使用 React v17.0.x 时的安装版本是 React DOM v18.x。
可以使用以下命令进行安装:
npm install react@17.x react-dom@18.x
请注意,要使用 AnimatePresence 函数组件,您的项目必须添加 Framer Motion 包。以下是安装方式:
npm install framer-motion
然后,您可以使用以下代码示例测试AnimatePresence是否正常工作:
import React, { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
const App = () => {
const [show, setShow] = useState(false)
return (
{show && (
Hello World
)}
)
}
export default App
如果一切正常,您应该能够在 Chrome 和 Firefox 上都成功看到“Hello World”文本的显示和隐藏。