JCrop 与 React 使用自定义脚本加载 jquery 对象：TypeError：a 未定义

Posted 2023-02-25

【中文标题】JCrop 与 React 使用自定义脚本加载 jquery 对象：TypeError：a 未定义

【英文标题】：JCrop with React using custom script to load the jquery Object: TypeError: a is undefined

【发布时间】：2017-07-13 09:30:17

【问题描述】：

我已提出以下申请：https://github.com/pc-magas/reaqct-jcrop

我有以下组件，我想在其中使用 jcrop：

import React,  Component  from 'react';
import $ from './MyJquery.js';
import Jcrop from 'jcrop';


class JCrop extends Component 

    constructor(props)
        super(props)
        this.state=
            'imageToCrop':props.imageToCrop,
            'imagehtmlElement':null
        
    

    comonentDidMount() 
        $("#img").Jcrop();
    

    render()
        return(
            <img id="img" rel= (rel) => this.setState(imageHtmlElement:rel)  src= this.state.imageToCrop  />
        )
    


export default JCrop

我还创建了./MyJquery.js，以便将 Jquery 对象应用于窗口：

import $,jQuery from 'jquery';

window.jQuery = jQuery;
export default $

但是当我通过 npm run 运行应用程序时，出现以下错误：

类型错误：a 未定义

我该如何解决？

【参考方案1】：

我认为您应该将componentWillMount 更改为componentDidMount。 在您的情况下，当您尝试 Jcrop 时，#img 元素尚不存在。

【参考方案2】：

您的问题是 window.jQuery 不包含正确的对象。它必须有 $ objext 而不是 jQuery。所以./MyJquery.js 应该是：

import $ from 'jquery';

window.jQuery = $;
export default $