猿问

react app中可以导入第三方js文件吗？

我有一个来自另一个项目（mvc）的 js 文件，它用 extJS 创建了一个简单的表。


我正在使用导航栏和侧边栏创建一个反应应用程序（create-react-app），我的目标是尝试为反应应用程序的主要内容导入该 js 文件


.js 文件：


Ext.Loader.setConfig({ enabled: true });


Ext.define('TestExtJsPanel', {

    extend: 'Ext.grid.Panel',

    alias: 'widget.testGrid',

    title: 'Simpsons',

    store: Ext.data.StoreManager.lookup('simpsonsStore'),

    columns: [

        { header: 'Name', dataIndex: 'name' },

        { header: 'Email', dataIndex: 'email', flex: 1 },

        { header: 'Phone', dataIndex: 'phone' }

    ],

    height: 200,

    width: 400,

    viewConfig: {

        trackOver: true,

        stripeRows: true,

        markDirty: false

    },

    initComponent: function () {

        var me = this;


        me.store = Ext.create('Ext.data.Store', {

            storeId: 'simpsonsStore',

            fields: ['name', 'email', 'phone'],

            data: {

                'items': [

                    { 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },

                    { 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },

                    { 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244" },

                    { 'name': 'Marge', "email": "marge@simpsons.com", "phone": "555-222-1254" }

                ]

            },

            proxy: {

                type: 'memory',

                reader: {

                    type: 'json',

                    root: 'items'

                }

            }

        });


        this.callParent(arguments);

    }

});


Ext.Loader.setConfig({ enabled: true });


Ext.define('TestExtJsPanel', {

    extend: 'Ext.grid.Panel',

    alias: 'widget.testGrid',

    title: 'Simpsons',

    store: Ext.data.StoreManager.lookup('simpsonsStore'),

    columns: [

        { header: 'Name', dataIndex: 'name' },

        { header: 'Email', dataIndex: 'email', flex: 1 },

        { header: 'Phone', dataIndex: 'phone' }

    ],

 

我的问题是：


可以将此 js 文件导入反应应用程序吗？我需要对 js 文件进行一些更改才能导入它吗？


慕尼黑5688855
浏览 301回答 1
1回答

慕妹3242003

您可以访问使用var其他脚本定义的任何变量（在您的脚本之前连接并且未标记为async）。好吧，如果你在你的 react-app 代码之前连接你的 js 文件，你可以访问所有使用var.例如索引.html<html>...&nbsp; <body>&nbsp; &nbsp; <script src="js-file.js" />&nbsp; &nbsp; <script src="react-code.js" />&nbsp; </body></html>js-file.jsvar mySharedVariable = "Example";react-code.js 它是 webpack 包（的 js 结果npm run build）...export class MyComponent extends Component {&nbsp; render() {&nbsp; &nbsp; return mySharedVariable;&nbsp; }}...MyComponent 将呈现字符串“示例”如果您使用 typescript，则必须在使用 like 之前声明 mySharedVariabledeclare let mySharedVariable: string;为什么不能使用async脚本？你可以阅读这篇文章UPD所以，让我们一步一步地一起做1) 使用 cra 创建反应应用npx create-react-app my-app2）创建文件external.js并将其放在公共文件夹（index.html旁边）（如果您有远程文件，请通过此步骤）var external = "external";3) 修改你的 index.html 文件（在结束 body 标签之前添加一行）<body>&nbsp; <noscript>You need to enable JavaScript to run this app.</noscript>&nbsp; <div id="root"></div>&nbsp; <!--&nbsp; &nbsp; This HTML file is a template.&nbsp; &nbsp; If you open it directly in the browser, you will see an empty page.&nbsp; &nbsp; You can add webfonts, meta tags, or analytics to this file.&nbsp; &nbsp; The build step will place the bundled scripts into the <body> tag.&nbsp; &nbsp; To begin the development, run `npm start` or `yarn start`.&nbsp; &nbsp; To create a production bundle, use `npm run build` or `yarn build`.&nbsp; -->&nbsp; <!-- src is path to your js file -->&nbsp; <script src="external.js"></script> <!-- add this line --></body>4) 修改你的 App.js 文件import React from 'react';import './App.css';function App() {&nbsp; return (&nbsp; &nbsp; &nbsp; <h1>{external}</h1>&nbsp; );}export default App;5）让我们启动你的应用程序npm run start
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答