Question

我有另一个项目（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文件导入React应用？我需要对js文件进行一些更改才能将其导入吗？

Answer 1

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

好吧，如果在react-app代码之前连接js文件，则可以访问所有使用var声明的变量。

例如

index.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捆绑包（npm run build的js结果）

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

MyComponent将呈现字符串“ Example”

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

declare let mySharedVariable: string;

为什么不能使用async脚本？您可以阅读this文章

UPD

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

1）使用cra创建React应用

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

是否可以在react应用中导入第三方js文件？

1 个答案: