反應：將document.QuerySelector用作庫的一部分

Question

我試圖在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>

這是我的JS文件：

new hoverEffect({
  parent: document.querySelector(".distortion"),
  intensity: 1,
  image1: "./images/kaapo.jpg",
  image2: "./images/kakko-rangers.jpg",
  displacementImage: "./images/ladyliberty3.png"
});


new hoverEffect({
  parent: document.querySelector(".distortion2"),
  intensity: 1,
  image1: "./images/jack.jpg",
  image2: "./images/hughes-card.jpg",
  displacementImage: "./images/devils-40.png"
});

一切正常，但是現在我試圖在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;

我認為document.querySelector('.my-div')在我的動畫變量中不起作用。 querySelector在React中不起作用嗎？ 如何正確選擇div？

我該如何在React中實現呢？ 我嘗試將animation變量嵌套在componentDidMount中，但這也不起作用。

Answer 1

通常，當您想直接在React中訪問DOM元素時，可以使用ref關鍵字：

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

在React文檔中有更多內容。

反應：將document.QuerySelector用作庫的一部分

問題描述

1 個解決方案

解決方案1
1 2019-09-02 22:51:54

反應：將document.QuerySelector用作庫的一部分

問題描述

1 個解決方案

解決方案1 1 2019-09-02 22:51:54

解決方案1
1 2019-09-02 22:51:54