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对象应用于窗口：

import $,{jQuery} from 'jquery';

window.jQuery = jQuery;
export default $

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

TypeError：a未定义

我该如何解决？

Answer 1

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

Answer 2

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

import $ from 'jquery';

window.jQuery = $;
export default $

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

2 个答案: