Question

我启动了一个新的react应用[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吗？ tutorial in the React docs介绍了如何创建元素。

在React / Framer运动中添加<motion.div />元素时如何解决“解析错误”

1 个答案: