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 のサブモジュールだったので、そのライブラリに到達するには 2 つのディレクトリをジャンプする必要がありました。 '^react-spring$': '<rootDir>/../../node_modules/react-spring/web.cjs'

于 2021-04-28T07:58:58.443 に答える