javascript - Snap.select 在 React.js 中为空，但在原生 JavaScript 中不为空

Question

我正在尝试将脚本转换为 React.js。此脚本在没有 JS 的情况下在常规 HTML 页面上运行。但是，当我尝试在 React 中使用它时，它失败了。Snap.select似乎不再起作用了。

在我的常规示例中，我只是使用库的 CDN 链接snapsvg。snapsvg-cjs可能是问题吗？我尝试了几种不同的snapsvgnpm 安装，但这是迄今为止最好的。

import React from 'react';
import ReactDOM from 'react-dom'
import 'bootstrap/dist/css/bootstrap.min.css';
import '../../style/App.scss';
import VideoPlayer from '../videoPlayer/VideoPlayer';
import $ from "jquery";
import {TweenMax,Power0, Power2, Power4} from "gsap";
import Snap from 'snapsvg-cjs';

export default class Wrapper extends React.Component {

render() {
    return <div className="container">
      <svg id="back">
        <radialGradient id="SVGID_1_" cx="0" cy="0" r="320.8304" gradientUnits="userSpaceOnUse">
          <stop  offset="0" className="stop1"/>
          <stop  offset="1" className="stop2"/>
        </radialGradient>
      </svg>
      <div id="card" className="weather">
        <svg id="inner">
          <defs>
            <path id="leaf" d="M41.9,56.3l0.1-2.5c0,0,4.6-1.2,5.6-2.2c1-1,3.6-13,12-15.6c9.7-3.1,19.9-2,26.1-2.1c2.7,0-10,23.9-20.5,25 c-7.5,0.8-17.2-5.1-17.2-5.1L41.9,56.3z"/>
          </defs>
          <g id="layer3"></g>
          <g id="cloud3" className="cloud"></g>
          <g id="layer2"></g>
          <g id="cloud2" className="cloud"></g>
          <g id="layer1"></g>
          <g id="cloud1" className="cloud"></g>
        </svg>
        <div className="videoArea">
            Video hierfr
        </div>
        <div className="details">
          <div className="temp">20<span>c</span></div>
          <div className="right">
            <div id="date">20 May 2050</div>
            <div id="summary"></div>
          </div>
        </div>
      </div>
      <svg id="outer"></svg>
    </div>;
  }
}

//  Fetch all DOM nodes in jQuery and Snap SVG
var currentWeather = "thunder";
var container = $('.container');
var card = $('#card');
var innerSVG = Snap('#inner');
var outerSVG = Snap('#outer');
var backSVG = Snap('#back');
var summary = $('#summary');
var date = $('#date');
var weatherContainer1 = Snap.select('#layer1');
var weatherContainer2 = Snap.select('#layer2');
var weatherContainer3 = Snap.select('#layer3');
var innerRainHolder1 = weatherContainer1.group();
var innerRainHolder2 = weatherContainer2.group();
var innerRainHolder3 = weatherContainer3.group();
var innerLeafHolder = weatherContainer1.group();
var innerLightningHolder = weatherContainer1.group();
var leafMask = outerSVG.rect();
var leaf = Snap.select('#leaf');
var outerLeafHolder = outerSVG.group();

var lightningTimeout;

// Set mask for leaf holder

outerLeafHolder.attr({
    'clip-path': leafMask
});

我得到的错误是：

TypeError：无法读取 null 的属性“组”

排队

var innerRainHolder1 = weatherContainer1.group();

标签： javascriptreactjssnap.svg