3

使用一个简单的教程尝试 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>
    )
  }
}

这是错误

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查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
4

1 回答 1

0

更改日志说，在 9.0 版中，他们更改了导入内容的方式，import { Spring, useSpring } from 'react-spring'应该可以工作并且应该使用。

我在他们的 GitHub 问题上找到了对我有用的解决方案。

放入： '^react-spring$': '<rootDir>/node_modules/react-spring/web.cjs', 在jest.config.js

在我的例子中，它是 monorepo 中的一个子模块，所以我必须跳转两个目录才能访问该库： '^react-spring$': '<rootDir>/../../node_modules/react-spring/web.cjs'

于 2021-04-28T07:58:58.443 回答