Question

我在index.html中包含了Ext引用（一次在本地以及cdn链接中），并且在react组件中使用Ext库，但是react抛出错误

> Ext未定义

这是我的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6ODLht1_glEtOB2s0u39ff-QZg3plL3E " />       
    <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js" />

    <link  href="../src/ext/theme-classic-all_1.css" rel="stylesheet" />
    <link  href="../src/ext/theme-classic-all_2.css" rel="stylesheet" />
    <script src="../src/ext/ext-all.js" type="text/javascript" />
    <script src="../src/ext/theme-classic.js" type="text/javascript" />

    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>

  </body>

import React from 'react';

export default class Ext_Page extends React.Component {

    shouldComponentUpdate(){
        return false;
    }

    componentDidMount() {       
        alert(window.Ext);
        window.Ext.onReady(function() {
        window.Ext.Msg.alert('Welcome', 'Hello, World!');
      });        
    }

    render(){
        return (
                <div id="ext" ref="ext" />
        );
    }
}

window.Ext是未定义的，这就是为什么我不能使用它。虽然我以相同的方式及其工作方式包含了Google Map API。

如何在不使用Extjs Reactor的情况下在Reactjs中包含Ext库

0 个答案: