Javascript 原因是什么；TypeError:对象（…）不是函数；在尝试使用香草倾斜时，你会做出反应吗？

我尝试在React应用程序中使用Vanilla Tilt，示例如下：

我的代码如下所示：

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>
    );
  }
}

错误消息：

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>

TypeError:对象（…）不是函数
倾斜
C:/01_Projects/src/components/_pages/CaseStudies/CaseStudies.js:15
12 | 
13 |功能倾斜（支柱）{
14 | const{options，…rest}=道具；
>15 | const tilt=useRef（空）；
16 | 
17 |使用效果（（）=>{
18 | VanillaTilt.init（tilt.current，选项）；
视图编译
▶ 18个烟囱框架倒塌。
./src/index.js
C:/01_Projects/src/index.js:48
45 | const target=document.querySelector（“#root”）；
46 | 
47 | 
>48 |渲染(
49 |   
50 |     
51 |       

---

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

尽管最近发布了

React-17

。某些软件包可能会出现一些错误。 尝试降级到React的先前稳定版本

转到您的

软件包。json

将

的“react dom”：“^17.0.1”

，

的“react”：“^17.0.1”

，替换为

的“react dom”：“^16.13.1”

，

的“react”：“^16.13.1”

---

然后在终端中安装

npm

，开始安装。

转到您的软件包。json将“react dom”：“^17.0.1”和“react”：“^17.0.1”替换为“react dom”：“^16.13.1”和“react”：“^16.13.1”。然后在终端中安装npm。让我知道它的行为：）codesandbox链接没有任何问题，无法找到任何错误。16.8.0中也引入了挂钩，因此如果问题没有更新，请检查版本谢谢@Imran，更改版本号并运行npm安装修复了生成错误。

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>