JCrop with React using custom script to load the jquery Object: TypeError: a is undefined

Question

我做了以下申请：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 对象应用到 window:

import $,{jQuery} from 'jquery';

window.jQuery = jQuery;
export default $

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

TypeError: a is undefined

我该如何解决？

Answer 1

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

import $ from 'jquery';

window.jQuery = $;
export default $

Answer 2

我认为你应该将 componentWillMount 更改为 componentDidMount。
在您的情况下，当您尝试 Jcrop.

时， #img 元素尚不存在

JCrop with React using custom script to load the jquery Object: TypeError: a is undefined

JCrop with React using custom script to load the jquery Object: TypeError: a is undefined

jquery

reactjs

jcrop