Как исправить «Ошибка синтаксического анализа» при добавленииэлемент в движении Реакт / Фреймер - PullRequest
Новая
       16

Как исправить «Ошибка синтаксического анализа» при добавленииэлемент в движении Реакт / Фреймер

0 голосов
/ 24 октября 2019

Я запустил новое приложение реакции [create-реагировать-приложение] и установил 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)

1 Ответ

0 голосов
/ 24 октября 2019

Это точный код из вашего приложения? Похоже, что вам не хватает открывающей части <motion, чтобы создать элемент движения фреймера: 

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

См. Эту песочницу кода для рабочего примера: https://codesandbox.io/s/framer-motion-stackoverflow-wbmbe.

Вы знакомы? с Реактом вообще? В руководстве в документации по React рассказывается, как создавать элементы.

...