reactjs - 添加时如何修复“解析错误”React / Framer 运动中的元素

Question

我启动了一个新的反应应用程序 [create-react-app] 并安装了 framer-motion。该应用程序按预期运行，直到添加一个成帧器运动元素：

export const HomePageTemplate = ({ home }) => {
  return (
    <Fragment>
      <h2>Hello</h2>
      <motion.div animate={{ x: 50 }}>
        <h1>Hello Motion</h1>
      </motion.div>
    </div>

      <section className="home  section">
...

相关错误：

Uncaught TypeError: Cannot read property 'expirationTime' of undefined

C:/[my path]/node_modules/react-error-overlay/lib/index.js:2172 Warning: The <_default /> component appears to be a function component that returns a class instance. Change _default to a class that extends React.Component instead. If you can't use a class try assigning the prototype on the function as a workaround. `_default.prototype = React.Component.prototype`. Don't use an arrow function since it cannot be called with `new` by React.

C:/[my path]/node_modules/react-error->overlay/lib/index.js:2172 The above error occurred in the <Component> >component: 
in Component (created by ForwardRef(MotionComponent))
    in ForwardRef(MotionComponent) (at pages/index.js:18)
    in div (at pages/index.js:16)

Answer 1

那是您应用程序中的确切代码吗？似乎您缺少<motion创建成帧器运动元素的开头部分：

<h1>Hello Motion</h1>
<motion.div animate={{ x: 100 }} />

有关工作示例，请参阅此代码沙箱：https ://codesandbox.io/s/framer-motion-stackoverflow-wbmbe 。

你对 React 大体上熟悉吗？React 文档中的教程介绍了如何创建元素。