如何從ReactJs .html文件訪問存儲在.js文件中的數組？

好吧，我試圖自己弄清楚這一個，我不能。我正在爲我在線玩的遊戲製作戰利品日誌網絡應用程序。該web應用程序託管在pythonanywhere上。它在ReactJS中的主html文件中編碼完全沒有數據庫或類似的東西。我存儲不同的怪物物品掉落表中的數組一樣如何從ReactJs .html文件訪問存儲在.js文件中的數組？

var monsterName = [ 
    ["item 1 name", [#,#,#], id], 
    ["item 2 name", [#], id] 
    ];

等...戰利品陣列長於很多，但你的想法。我的代碼正常工作，使用這些數組來抓取項目名稱和圖像路徑等。我想如果現在我的代碼工作時我要添加更多的怪物，我應該將這些陣列重新定位到單獨的文件中。我把這個文件叫做droptables.js。我將它保存在主html文件所在的目錄中，因此很容易找到它。然後我叫主HTML腳本標記的數組（其中所有Reactjs代碼是）這樣

lootTable = monsterName;

我嘗試，並試圖使用各種方法將它從.js文件導出和導入到了HTML文件，並沒有工作。

import monsterName from './droptables.js';

加上

exports.monsterName = [array info]

我試圖

module.exports = monsterName; 
export default monsterName;

我試圖導入在HTML的頭而不是像

<script src="./droptables.js" />

我沒有列出每一個試圖因爲我嘗試過幾次不同的路徑太思考也許這是它

'/droptables.js' 
'droptables.js' 
'droptables' 
'/templates/droptables.js'

你明白了。希望有人能幫我解決這個問題。這是我的應用程序完成之前的最後一個障礙之一，至少在基本功能意義上說，它讓我瘋狂，我無法解決這個問題。感謝您的任何幫助！

編輯：我在下面添加了我的HTML/React表的開頭，以便您可以看到它看起來像什麼以及我試圖導入的位置。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>LootLogger Webapp 1.1</title> 
    <link rel="stylesheet" type="text/css" href="/static/css/main.css"> 
    <script src="react url"></script> 
    <script src="react url"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel- 
    core/5.8.34/browser.min.js"></script> 

</head> 
<body> 

<div id="container"></div> 

<script type="text/babel"> 

    import abyssalDemon from './droptables.js'; 
    var monsterLoot = abyssalDemon; 

    var LootEntry = React.createClass({ 
     render: function() { 
      return (
       <div>{this.props.children}</div> 
      ); 
     } 
    });

正如你所看到的，abyssalDemon是我叫我的陣列中的其他JavaScript文件，monsterLoot是我在實際的代碼在這裏的HTML表使用數組，所以我需要monsterLoot從等於abyssalDemon其他js文件的一切工作。 LootEntry只是我製作的第一個React組件，它是用戶記錄下的戰鬥列表中的一個條目。

來源

2017-05-26 sheymyster

你有沒有嘗試在一個立即調用的函數內附上一切（在droptables.js）？ –

我很抱歉，但我不完全明白你的意思。我將更新我的代碼的完整開始。 – sheymyster

立即調用函數實際上是它是什麼。一個例子是'（function hi（）{console.log（「hi」）;}）（）'。注意函數聲明之後的括號。它將使html內部的變量droptable.js可訪問。 –

好吧，我想出瞭如何以不同的方式做到這一點，而不使用必需的，而是使用Jquery。我修改了我的原始html文檔，如下所示。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>LootLogger Webapp 1.1</title> 
    <link rel="stylesheet" type="text/css" href="/static/css/main.css"> 
    <script src="react url"></script> 
    <script src="react url"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel- 
    core/5.8.34/browser.min.js"></script> 
    <script 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" 
    type="text/javascript"></script> 

</head> 
<body> 

<div id="container"></div> 

<script type='text/javascript' src='/static/javascript/droptables.js'> 
</script> 
<script type="text/javascript"> 
    var monsterLoot = new Array(); 
    $(document).ready(function() { 
    monsterLoot = AbyssalDemon; 
    }); 
</script> 

<script type="text/babel"> 

    var LootEntry = React.createClass({ 
     render: function() { 
      return (
       <div>{this.props.children}</div> 
      ); 
     } 
    });

我在標題標記中添加了Jquery的導入。我還在我的身上添加了一個標籤來引用我的droptables.js文件。最後，我添加了一個Jquery函數，使我的monsterLoot數組等於來自外部js文件的AbyssalDemon數組。我在文檔就緒函數中這樣做是因爲我相信我的部分問題是我的頁面在導入monsterLoot數組之前試圖生成我的按鈕，因爲它是未定義的數組，所以引發了錯誤。至少這是我的猜測。它雖然現在工作！

來源

2017-05-26 22:29:16 sheymyster

如何從ReactJs .html文件訪問存儲在.js文件中的數組？

回答

相關問題