Испытание реагирующей пружины, используя простое руководство. Тем не менее, это не работает для меня. Вот мой код:
import React, { Component } from "react"
import { Spring } from "react-spring"
export default class Box extends Component {
render() {
return (
<Spring
from={{ opacity: 0, marginTop: -1000 }}
to={{ opacity: 1, marginTop: 0 }}
>
{props => (
<div style={props}>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
</div>
)}
</Spring>
)
}
}
и вот ошибка
Недопустимый тип элемента: ожидается строка (для встроенных компонентов)
или класс / функция (для составных компонентов), но получил: undefined. Вы
скорее всего забыл экспортировать ваш компонент из файла, в котором он определен,
или вы могли смешать импорт по умолчанию и имя.
Проверьте метод рендеринга Box
.
Я использую реагирующую пружину в стандартном стартере Гэтсби и просто импортирую свой компонент Box следующим образом:
import React from "react"
import Layout from "../components/layout"
import Box from "../components/box"
const IndexPage = () => (
<Layout>
<Box />
</Layout>
)
export default IndexPage