任何人都可以解释为什么我不能在framer-motion中使用className或onClick:
import { motion } from 'framer-motion';
export function App() {
return <motion.div className="app">App</motion.div>;
}
于是出现错误:
Type '{ children: string; className: string; }' is not assignable to type 'IntrinsicAttributes & PropsWithoutRef<HTMLMotionProps<TagName>> & RefAttributes<unknown> & Readonly<...>'.
Property 'className' does not exist on type 'IntrinsicAttributes & PropsWithoutRef<HTMLMotionProps<TagName>> & RefAttributes<unknown> & Readonly<...>'.ts(2322)
(property) className: string
这是我的package.json:
{
"name": "preact",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"framer-motion": "^10.16.15",
"preact": "^10.19.1",
"react-hot-toast": "^2.4.1",
"react-icons": "^4.12.0",
"vite-plugin-svgr": "^4.2.0"
},
"devDependencies": {
"@preact/preset-vite": "^2.6.0",
"@types/node": "^20.9.3",
"sass": "^1.69.5",
"typescript": "^5.2.2",
"vite": "^5.0.0"
}
}
我的tsconfig.json代码:
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
"paths": {
"react": ["./node_modules/preact/compat/"],
"react-dom": ["./node_modules/preact/compat/"],
"@/*": ["./src/*"]
},
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"jsxImportSource": "preact",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }],
"types": ["vite-plugin-svgr/client"]
}
我重新安装了framer-motion并安装了版本9(基于YouTube上的教程)而不是版本10,它仍然无法工作。
当我从 next js v14 升级到 v15 时,我遇到了同样的问题,我不知道其原因,但您可以通过从 framer-motion 扩展 MotionProps 来修复它。
import { motion, MotionProps } from 'framer-motion';
// Define a new interface that extends MotionProps
interface CustomMotionProps extends MotionProps {
className: string;
}
// Create a new component that uses the custom props
const CustomMotion = motion<CustomMotionProps>('div');