使用简单教程试用 react-spring。但是,它对我不起作用。这是我的代码:
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>
)
}
}
这里是错误
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of
Box
.
我在 gatsby 的默认启动器中使用 react-spring,并且只是像这样导入我的 Box 组件:
import React from "react"
import Layout from "../components/layout"
import Box from "../components/box"
const IndexPage = () => (
<Layout>
<Box />
</Layout>
)
export default IndexPage
最佳答案
变更日志说,在 9.0 版中,他们将如何更改为 import things和 import { Spring, useSpring } from 'react-spring'
应该工作并且应该使用。
I found on their GitHub issues对我有用的解决方案。
放:
'^react-spring$': '<rootDir>/node_modules/react-spring/web.cjs',
在 jest.config.js
在我的例子中,这是 monorepo 中的一个子模块,所以我必须跳到两个目录才能到达那个库:
'^react-spring$': '<rootDir>/../../node_modules/react-spring/web.cjs'
关于javascript - 简单的 react-spring 组件在 gatsby 中不起作用 - 元素类型无效 : expected a string or a class/function but got: undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56505233/