Я пытаюсь использовать Vanilla Tilt в своем приложении React со следующим примером: 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 работать в моем приложении, и был бы рад, если бы кто-нибудь указал, что я делаю неправильно.
Ссылка codeandbox не имеет проблем, не может найти никакой ошибки. Также в 16.8.0 введены хуки, так что проверяйте версии, если вопрос не обновился
Большое спасибо @Imran, изменение номеров версий и запуск npm install исправили ошибки сборки.
Хотя 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 в терминале, чтобы начать.
Перейдите в свой package.json, замените «реагировать-дом»: «^ 17.0.1» и «реагировать»: «^ 17.0.1» на «реагировать-дом»: «^ 16.13.1» и «реагировать» : "^ 16.13.1". Затем выполните установку npm в терминале. Подскажите как себя ведет :)