链接 jquery 循环以做出反应，什么都不显示，没有错误答案

【问题标题】：Linking jquery loop to react, show nothing, no errors链接 jquery 循环以做出反应，什么都不显示，没有错误
【发布时间】：2020-12-20 08:34:56
【问题描述】：

在开发我的 react 应用时遇到同样的问题。所以我已经使用这样的命令导入 JQuery

npm install jquery

后来我从网站下载了一个 js min 文件，

https://redopop.com/loupe/

您可以在顶部找到它。它命名为 jquery.loupe.min.js。所以我复制了它，并在src文件夹中创建了我自己的js文件。

在我的标题中，我包含了所有的文件：

import $ from 'jquery';
import './jquery.loupe.min.js'

在我的函数中，我尝试调用循环：

  if (this.props.activeItem === "Loop") {
    $('graph').loupe();
    //window.$ = window.jQuery = require('jquery')
    //window.$('graph').loupe();
  }

我认为第二行和第三行应该可以工作，但结果相同。没有错误，但什么也没有。我的 window$ 的 console.log

     content.js?5f7c:406 ƒ ( selector, context ) {


    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    return new jQuery…

所以在我的渲染方法中，我有一个我想用循环连接的画布：

  <div className="canvas">
    <canvas
      id="graph"
      className="canvas-actual"
      width="800px"
      height="480px"
      ref={this.canvasRef}
      onMouseDown={this.handleMouseDown}
      onMouseMove={this.handleMouseMove}
      onMouseUp={this.handleMouseUp}
    >
    </canvas>

什么都没发生。没有错误或警告。我没有什么重要的想法。谢谢。代码（需要python2）

https://github.com/andr1312e/React-recognize

【问题讨论】：

如果你注意到代码，问我
不要查询 dom 使用 React API 和 ref。顺便说一句，当你有 React 时，你真的不应该使用 jquery。
我愿意，它给我一个错误 Uncaught TypeError: Cannot define property jQuery351064704862672539812, object is not extensible
真的不推荐在react中使用jQuery，如果想要react中的放大镜效果可以参考这个answer

标签： javascript jquery reactjs loops

【解决方案1】：

你好 Andrew，如果你使用 react.js，我建议你使用 react-image-magnifiers 库

如果使用 react rty 就使用这个

反应图像放大镜：一组用于鼠标和触摸的响应式、图像放大 React 组件。

在 npm 中查看： https://www.npmjs.com/package/react-image-magnifiers

react-image-magnifiers 演示： https://adamrisberg.github.io/react-image-magnifiers/

github： https://github.com/AdamRisberg/react-image-magnifiers

【讨论】：