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

关键词：

【中文标题】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 $

【讨论】：

无法使用 React 和 Bootstrap 创建自定义样式

】无法使用React和Bootstrap创建自定义样式【英文标题】：CannotcreatecustomstylewithReactandBootstrap【发布时间】：2017-03-1107:05:04【问题描述】：我正在使用react-bootstrapNPM包来使我的React组件看起来正确。我需要自定义其中一些，所以我关... 查看详情

react自定义组件之懒加载-lazyload。

...，写成变量的形式，可以懒加载图片，列表，echats等。4.使用react中的Suspense和Lazy 查看详情

如何将 React 组件的自定义钩子与“map”一起使用

】如何将React组件的自定义钩子与“map”一起使用【英文标题】：HowtouseReactcomponent\'scustomhookwith"map"【发布时间】：2021-04-0721:51:04【问题描述】：我正在尝试制作一个Checkbox组件。这是我的Checkbox.tsx。importReactfrom"react";import... 查看详情

如何将 TypeScript 与 withRouter、connect、React.Component 和自定义属性一起使用？

...TypeScript与withRouter、connect、React.Component和自定义属性一起使用？【英文标题】：HowtouseTypeScriptwithwithRouter,connect,React.Componentandcustomproperties?【发布时间】：2018-08-0709:31:33【问题描述】：我有一个使用connect、withRouter并接收自定义属... 查看详情

React-Bootstrap 样式未与故事书一起加载

...36:07【问题描述】：我最近开始在我的react-typescript项目中使用storybook并遇到了以下问题：我的react-bootstrap组件没有样式。组件是已加载但没有样式。我尝试使用样式加载器和css加载器在自定义webpac 查看详情

如何为 Jcrop 'setSelect' 选项指定自定义值？

】如何为Jcrop\\\'setSelect\\\'选项指定自定义值？【英文标题】：HowcanIspecifyacustomizedvaluefortheJcrop\'setSelect\'option?如何为Jcrop\'setSelect\'选项指定自定义值？【发布时间】：2012-07-1404:51:00【问题描述】：我无法理解Jcrop\'setSelect\'选项。... 查看详情

jCrop 中的图像失真问题

...人遇到这个错误吗？【问题讨论】：您是否在原始图像上使用自定义宽度和高度？此外，我们需要查看您的html和javascript。如果它们很大，请使用gist 查看详情

在 Visual Studio 2019 中将自定义脚本文件与 C++ 项目一起使用

】在VisualStudio2019中将自定义脚本文件与C++项目一起使用【英文标题】：UsingcustomscriptfileswithC++projectinVisualStudio2019【发布时间】：2020-08-1916:09:13【问题描述】：TL;DR我的项目在运行时使用自定义脚本文件。我的项目在VS中构建良好... 查看详情

React-native 桥接与 Swift 单例自定义类

...10:36:49【问题描述】：今天，我尝试在我的Javascript代码中使用实现单例模式的自定义Swift类。我已经创建了本机模块，但今天我遇到了这个错误：“致命错误：对类使用未实现的初始化程序\'init()\'”我猜是因为单例模式，但 查看详情

reactnative中如何使用自定义的iconfont图标(代码片段)

...w~】本文主要分为三部分：react-native-vector-icons库的集成与使用如何使用任意自定义的iconfont编写脚本来快捷生成iconfont映射文件 1.react-native-vector-icons库的集成与使用react-native-vector-icons是ReactNative开发中十分好用的一个用来展... 查看详情

使用自定义输入组件时的 React-Native 不变违规

】使用自定义输入组件时的React-Native不变违规【英文标题】：React-NativeInvariantViolationWhenUsingCustomInputComponent【发布时间】：2020-07-0209:21:48【问题描述】：我正处于构建react-native应用程序的开始阶段，在我的第一个屏幕上，我想要... 查看详情

将 AWS Cognito 与 google 和自定义登录与 React 集成的步骤

...码）和谷歌登录集成AWScognito的步骤？我能够毫无问题地使用自定义登录。我能够毫无问题地配置用户池。我只是在徘徊客户端的变化 查看详情

jcrop_api 未定义？

...ript中将Jcrop添加到函数时，jcrop_api变量变为未定义。当我使用$(document).ready(function()...);在窗口加载时创建Jcrop时，插件正在工作（包括api）问题是我希望用户能够保持纵横比，或者不仅仅是通过选中或取消选中复选框。所以我有 查看详情

与 @ConfigurationProperties 一起使用的自定义基于 XML 的属性源加载器

】与@ConfigurationProperties一起使用的自定义基于XML的属性源加载器【英文标题】：CustomXML-BasedPropertySourceLoaderforUseWith@ConfigurationProperties【发布时间】：2016-07-1510:29:56【问题描述】：我有兴趣创建一个或多个自定义属性源加载器，并... 查看详情

如何为 React.lazy 组件键入自定义的“预加载”方法？

】如何为React.lazy组件键入自定义的“预加载”方法？【英文标题】：Howtotypecustom`preload`methodforReact.lazycomponents?【发布时间】：2022-01-1500:28:45【问题描述】：当尝试为React.lazy()组件实现preload()方法时，典型的模式类似于，constReactL... 查看详情

React ，自定义钩子慢渲染

...好，我制作了一个自定义钩子，它与通用表单的组件一起使用，但是，我注意到状态更改时它很慢。#customHookexportconstuseFormController=(meta)=>constsetVisible,setLoading=useContext(FeedBa 查看详情

如何将 expo react-native 自定义字体应用于整个容器

...布时间】：2020-02-1414:32:16【问题描述】：我尝试为我正在使用expo开发的react-native应用程序加载自定义字体，但我不知道如何以更简单的方式为整个屏幕容器加载字体。目前我使用的是官方的expo文档：ExpoCustom 查看详情

react+webpack+es6环境搭建(自定义框架)

引言　　目前React前端框架是今年最火的。而基于React的ReactNative也迅速发展。React有其独特的组件化功能与JSX的新语法，帮助前端设计有了更好的设计与便捷，而ReactNative更是扩大了前端的边界。　　说道React，那就不得不说一下... 查看详情