亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

react app中可以導入第三方js文件嗎？

react app中可以導入第三方js文件嗎？

慕尼黑5688855 2022-01-13 16:24:21
我有一個來自另一個項目（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": "[email protected]", "phone": "555-111-1224" },                    { 'name': 'Bart', "email": "[email protected]", "phone": "555-222-1234" },                    { 'name': 'Homer', "email": "[email protected]", "phone": "555-222-1244" },                    { 'name': 'Marge', "email": "[email protected]", "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 文件進行一些更改才能導入它嗎？
查看完整描述

1 回答

?
慕妹3242003

TA貢獻1824條經驗 獲得超6個贊

您可以訪問使用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


查看完整回答
反對 回復 2022-01-13
  • 1 回答
  • 0 關注
  • 325 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號