ReactJs .htmlファイルから.jsファイルに格納された配列にアクセスするにはどうすればよいですか？

さて、私は自分自身でこれを理解しようとしましたが、私はできません。私はオンラインで遊ぶゲームのためのウェブアプリをログに記録しています。 Webアプリケーションはpythonanywhereでホストされています。 ReactJSでメインのhtmlファイルにコード化されているので、データベースなどはありません。私は...戦利品アレイはたくさんより長いですが、あなたのアイデアを得るReactJs .htmlファイルから.jsファイルに格納された配列にアクセスするにはどうすればよいですか？

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

その他、各種のような配列の異なるモンスターのために戦利品のテーブルを格納します。これらの配列を使用して項目名や画像パスなどを取得するためのコードが正しく機能していました。私はコードが機能したのでモンスターを追加するつもりならば、これらの配列を別のファイルに再配置する必要があります。私はこのファイルを「droptables.js」と呼んだ。メインhtmlファイルと同じディレクトリに保存したので、簡単に見つけることができます。私はその後、私が試したとの.jsファイルからそれをエクスポートしにインポートするさまざまな方法を使用しようとしました。この

lootTable = monsterName;

のようなメインのHTMLスクリプトタグの配列（Reactjsコードのすべてがどこにあるか）という名前htmlファイル、および何も動作しません。私は代わり

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

ように私はすべての試みを列挙していないHTMLのヘッダにインポートしようとした

module.exports = monsterName; 
export default monsterName;

を試み

exports.monsterName = [array info]

と結合

import monsterName from './droptables.js';

ここで私はいくつか試したので異なる経路も考えていたかもしれません。

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

あなたはアイデアを得ます。うまくいけば、そこに誰かが私がこれを理解するのを助けることができます。それは私のアプリが少なくとも基本的な機能上の意味で完成する前の最後のロードブロッキングの1つであり、私はこれを解決することができないと私を夢中にしている。何か助けてくれてありがとう！

EDIT：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のシートに、ここで実際のコードで使用配列ですので、私はからabyssalDemonに等しくなるようにmonsterLootが必要すべての作業のための他の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ファイルに格納された配列にアクセスするにはどうすればよいですか？

答えて

関連する問題