Javascript 反应：将document.QuerySelector用作库的一部分_Javascript_Reactjs_Three.js_Selector_Gsap

Javascript 反应：将document.QuerySelector用作库的一部分

javascript reactjs three.js

Javascript 反应：将document.QuerySelector用作库的一部分,javascript,reactjs,three.js,selector,gsap,Javascript,Reactjs,Three.js,Selector,Gsap,我试图在React中使用图像悬停效果库。该库使用Three.js和GSAP设置图像动画。我已经用这个库在一个普通的JS文件中构建了一个小的示例项目我能够像这样轻松地构建它。这是我的HTML文件： <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./styles.css

我试图在React中使用图像悬停效果库。该库使用Three.js和GSAP设置图像动画。我已经用这个库在一个普通的JS文件中构建了一个小的示例项目

我能够像这样轻松地构建它。这是我的HTML文件：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css"/>
    <title></title>
  </head>
  <body>
    <div class="container">
      <div class="distortion">
      </div>
      <div class="distortion2">
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha256-lPE3wjN2a7ABWHbGz7+MKBJaykyzqCbU96BJWjio86U=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.min.js" integrity="sha256-3mBEX8I0uMLF7+AUjJeTCelosuorzYpqwBMBPDTyQqY=" crossorigin="anonymous"></script>
    <script src="./hover.js"></script>
    <script src="./app.js"></script>
  </body>
</html>

一切正常，但现在我正在尝试在React项目中执行类似的操作，在React中使用此库时遇到问题

以下是我尝试过的：

import React, { Component } from 'react';
import hoverEffect from 'hover-effect';
import kakko from '../assets/kaapo.jpg';
import {kakkoRangers} from '../assets/kakko-rangers.jpg';
import {ladyLiberty} from '../assets/ladyliberty3.png';
import styled, { css } from 'styled-components';

const STYLES = styled.div`
  height: 100vh;
  width: 100%;

  .my-div {
    height: 20em;
    width: 30em;
  }
`;

class Test extends Component {
  constructor(props) {
    super(props);

    this.state = {

    }
  }

  componentDidMount = () => {
  }

  render() {
    const animation = new hoverEffect({
          parent: document.querySelector('.my-div'),
          intensity: 0.3,
          image1: {kakko},
          image2: {kakkoRangers},
          displacementImage: {ladyLiberty}
      });

    return (
      <STYLES>
        <div>
          <h1>Test</h1>
          <div className="my-div">
          </div>
        </div>
      </STYLES>
    );
  }
}

export default Test;

import React，{Component}来自'React'；
从“悬停效果”导入悬停效果；
从“../assets/kaapo.jpg”导入kakko；
从“../assets/kakko rangers.jpg”导入{kakkoRangers}；
从“../assets/ladylberty3.png”导入{ladylberty}；
导入样式化，{css}来自“样式化组件”；
const STYLES=styled.div`
高度：100vh；
宽度：100%；
.我的部门{
高度：20em；
宽度：30em；
}
`;
类测试扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
}
}
componentDidMount=（）=>{
}
render（）{
常量动画=新的悬停效果({
父项：document.querySelector（'.my div'），
强度：0.3，
图1：{kakko}，
图2：{kakkoRangers}，
置换图像：{ladylberty}
});
返回(
试验
);
}
}
导出默认测试；

我认为

document.querySelector（'.my div'）

在我的动画变量中不起作用。查询选择器在React中不起作用吗？如何正确选择div

我如何在React中实现这一点？我尝试将动画变量嵌套在componentDidMount中，但也不起作用。

通常，当您想直接访问React中的DOM元素时，请使用

ref

关键字：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.myRef=React.createRef（）； } render（）{ 返回； } }

更多信息请参见。

如果库希望在hoverEffect函数中将ref作为其父属性传入，我将如何将其与库结合使用？

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}