在尝试将 Vanilla Tilt 与 React 一起使用时，是什么导致了“TypeError: Object(...) is not a function”？

Question

我正在尝试使用以下示例在我的 React 应用程序中使用 Vanilla Tilt： https://codesandbox.io/s/vanilla-tilt-with-react-n5ptm

我的代码如下所示：

import React, { Component, useEffect, useRef } from "react";
import ReactDOM from 'react-dom';
import Heading from "../../_styled/Heading";
import Paragraph from "../../_styled/Paragraph";
import { Content } from "../../_styled/Content";
import MouseScroll from "../../_static/MouseScroll";
import PlaceHolder from "../../_static/PlaceHolder";
import VanillaTilt from 'vanilla-tilt';

function Tilt(props) {
  const { options, ...rest } = props;
  const tilt = useRef(null);

  useEffect(() => {
    VanillaTilt.init(tilt.current, options);
  }, [options]);

  return <div ref={tilt} {...rest} />;
}

const options = {
    scale: 1.2,
    speed: 1000,
    max: 30
  };


export default class CaseStudies extends Component {
  render() {
    const { showMouseIcon } = this.props;

    return (
      <Content>
        <PlaceHolder sideMenuOpen={this.props.sideMenuOpen}/>
        <div className="container casestudiesheight">
          <div className="row casestudiesheight">
            <div className="case-studies-container">
              <Heading className="careers_ku">Case Studies</Heading>
              <div className="case-card-container">
                <Tilt className="case-card">Lorem ipsum
                  </Tilt>
                <div className="case-card">a</div>
                <div className="case-card"></div>
              </div>
            </div>
            {showMouseIcon && <MouseScroll />}
          </div>
        </div>
      </Content>
    );
  }
}

版本号：

    {
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.9.4",
    "@material-ui/icons": "^3.0.1",
    "axios": "^0.18.1",
    "classnames": "^2.2.6",
    "emotion": "^9.1.3",
    "jquery": "^3.5.1",
    "moment": "^2.22.2",
    "normalize.css": "^8.0.0",
    "react": "^17.0.1",
    "react-cookie-consent": "^2.2.2",
    "react-custom-scrollbars": "^4.2.1",
    "react-date-picker": "^7.0.0",
    "react-datepicker": "^1.7.0",
    "react-dom": "^17.0.1",
    "react-fullpage": "^0.1.19",
    "react-ga": "^2.5.7",
    "react-helmet": "^6.1.0",
    "react-icons": "^3.5.0",
    "react-meta-tags": "^0.7.4",
    "react-picky": "^4.0.1",
    "react-player": "^1.6.6",
    "react-protected-mailto": "^1.0.3",
    "react-responsive": "^6.0.0",
    "react-responsive-carousel": "^3.1.43",
    "react-scripts": "1.1.4",
    "react-select": "^2.1.1",
    "react-select-checked": "^0.1.10",
    "react-sidebar": "^3.0.2",
    "react-slideshow-image": "^1.0.8",
    "react-toastify": "^4.5.2",
    "react-vanilla-tilt": "^1.0.0",
    "vanilla-tilt": "^1.7.0"
  },

错误信息：

TypeError: Object(...) is not a function
Tilt
C:/01_Projects/src/components/_pages/CaseStudies/CaseStudies.js:15
  12 | 
  13 | function Tilt(props) {
  14 |   const { options, ...rest } = props;
> 15 |   const tilt = useRef(null);
  16 | 
  17 |   useEffect(() => {
  18 |     VanillaTilt.init(tilt.current, options);
View compiled
▶ 18 stack frames were collapsed.
./src/index.js
C:/01_Projects/src/index.js:48
  45 | const target = document.querySelector("#root");
  46 | 
  47 | 
> 48 | render(
  49 |   <Router>
  50 |     <React.Fragment>
  51 |       <Switch>

我找不到让 VanillaTilt 在我的应用程序中工作的解决方案，如果有人能指出我做错了什么，我会很高兴。

Answer 1

虽然最近发布了 React-17。某些包可能会出现一些错误。 尝试降级到之前的稳定版 React。

转到您的 package.json，用 "react-dom": "^17.0.1" 和 "react": "^17.0.1" 替换 "react-dom": "^16.13.1" 和 "react": "^16.13.1"。

然后在终端中执行 npm install 以启动它。