时间戳

首页 > 解决方案 > react app中可以导入第三方js文件吗？

javascript - 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' }
    ],
    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);
    }
});

我的问题是：

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

标签： javascriptreactjsextjsimport

解决方案

您可以访问使用var其他脚本定义的任何变量（在您的脚本之前连接并且未标记为async）。

好吧，如果你在你的 react-app 代码之前连接你的 js 文件，你可以访问所有使用var.

例如

索引.html

<html>
...
  <body>
    <script src="js-file.js" />
    <script src="react-code.js" />
  </body>
</html>

js-file.js

var mySharedVariable = "Example";

react-code.js 它是 webpack 包（的 js 结果npm run build）

...
export class MyComponent extends Component {
  render() {
    return mySharedVariable;
  }
}
...

MyComponent 将呈现字符串“示例”

如果您使用 typescript，则必须在使用 like 之前声明 mySharedVariable

declare let mySharedVariable: string;

为什么不能使用async脚本？你可以阅读这篇文章

UPD

所以，让我们一步一步地一起做

1) 使用 cra 创建反应应用

npx create-react-app my-app

2）创建文件external.js并将其放在公共文件夹（index.html旁边）（如果您有远程文件，请通过此步骤）

var external = "external";

3) 修改你的 index.html 文件（在结束 body 标签之前添加一行）

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <!--
    This HTML file is a template.
    If you open it directly in the browser, you will see an empty page.

    You can add webfonts, meta tags, or analytics to this file.
    The build step will place the bundled scripts into the <body> tag.

    To begin the development, run `npm start` or `yarn start`.
    To create a production bundle, use `npm run build` or `yarn build`.
  -->

  <!-- src is path to your js file -->
  <script src="external.js"></script> <!-- add this line -->
</body>

4) 修改你的 App.js 文件

import React from 'react';
import './App.css';

function App() {
  return (
      <h1>{external}</h1>
  );
}

export default App;

5）让我们启动你的应用程序

npm run start

推荐阅读