相关疑难解决方法(0)

嗨,我只想收到ajax请求,但问题是在React中没有定义jquery.React版本是14.0

错误信息

 Uncaught ReferenceError: $ is not defined

我有两个文件

index.js

import React from 'react'; 
import { render } from 'react-dom';
import App from './containers/App';  

const root = document.getElementById('root');  

render( 
  <App source='https://api.github.com/users/octocat/gists' />, 
  root
);

app.js

import React, { Component } from 'react';

export default class App extends Component {

    componentDidMount() {
        const { source } = this.props;

        console.log($); // throws error
    }

    render() {
        return (
            <h1>Hey there.</h1>
        );
    }
}

我在测试一些javascript代码时得到以下错误,从一个打字稿文件中转换而来.

这是错误:

Error: _mapAction2.default is not a constructor

以下是导致错误的代码行:

var mapAction = new MapAction(MapActionType.POLYGONDRAGGED, []);

这是原始的typescript -file map-action.ts:

import { IMapAction} from './imap-action';
import { MapActionType } from './map-action-type.enum';
import {LatLngLiteral} from 'angular2-google-maps/core';

export class MapAction implements IMapAction{
    type: MapActionType;
    paths: Array<LatLngLiteral>;

    constructor(mapActionType: MapActionType, paths: Array<LatLngLiteral>){
        this.type = mapActionType;
        this.paths = paths;
    }

    public getType(): MapActionType{
        return this.type;
    }

    public getPaths(): Array<LatLngLiteral>
    {
        return this.paths;
    }

}

这是转换后的.js文件map-action.js:

"use strict";
class MapAction {
    constructor(mapActionType, paths) { …

我不知道如何使弹出窗口起作用，如：https ://getbootstrap.com/docs/4.0/components/popovers/ 。

文档讨论了popover支持是一个插件，并且也需要工具提示插件，所以我已经修改了我的代码webpack.config.js以添加这两个插件，现在看起来像这样：

...
new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
  Popper: ['popper.js', 'default'],
  Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
  Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
}),
...

我还没有发现关于自举插件概念的任何文件，因此上述两行Popover，并Tooltip从搜索来了，不知道他们是正确的。

该文档指出：

由于性能原因，弹出窗口是可选的，因此您必须自己对其进行初始化。

但是我不知道该怎么做。

文档显示以下用于初始化弹出窗口的代码：

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

但是我不知道该怎么做- popover()我的元素上没有要调用的功能-这是如何工作的？

这是我的尝试使用弹出框的代码的示例：

render(){

  ...

  <span>
    Summary info
    <button 
      type="button" className="btn btn-sm" 
      data-toggle="popover" title="Popover title" 
      data-content="The popover Content"
    >
      Show popover
    </button>        
  </span>

  ...
}

如何在React应用程序的上下文中使Bootstrap V4弹出功能起作用？具体来说-如何“初始化”弹出窗口？

我正在使用Typescript 2.3，React 16，Bootstrap 4（没有react-bootstrap样式库）。

请注意，react-bootstrap仅支持Bootstrap V3，而reactstrap太不稳定，我不想使用它。