如何从 ReactJs .html 文件访问存储在 .js 文件中的数组？

Question

好吧，我试图自己解决这个问题，但我做不到。我正在为我在线玩的游戏制作一个战利品记录网络应用程序。 Web 应用程序托管在 pythonanywhere 上。它完全在 html 主文件中的 ReactJS 中编码，因此没有数据库或类似的东西。我将不同怪物的战利品表存储在一个数组中，例如

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

等等...战利品数组比那长很多，但你明白了。我的代码可以正常工作以使用这些数组来获取项目名称和图像路径等等。我想既然我的代码可以工作了，如果我要添加更多的怪物，我应该将这些数组重新定位到一个单独的文件中。我将此文件命名为 'droptables.js'。我将它保存在与主 html 文件相同的目录中，这样很容易找到它。然后我在主要 html 脚本标签（所有 Reactjs 代码所在的位置）中命名了一个数组，如下所示

lootTable = monsterName;

我试了又试，用各种方法从.js文件中导出，导入到html文件中，none奏效了。

import monsterName from './droptables.js';

加上

exports.monsterName = [array info]

我试过了

module.exports = monsterName;
export default monsterName;

我尝试在 html 的 header 中导入而不是像

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

我没有在这里列出每一次尝试，因为我尝试了几种不同的路径，我想也许就是这样

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

你懂的。希望有人能帮我解决这个问题。这是我的应用程序至少在基本功能意义上完成之前遇到的最后障碍之一，这让我发疯，我无法解决这个问题。感谢您的帮助！

编辑：我在下面添加了 HTML/React sheet 的开头，这样您就可以看到它的外观以及我尝试导入的位置。

<!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 sheet 上的实际代码中使用的数组，所以我需要 monsterLoot 等于其他 js 文件中的 abyssalDemon 才能正常工作。 LootEntry 只是我制作的第一个 React 组件，它是用户记录的战利品列表中的一个条目。

Answer 1

好吧，我想出了如何在不使用 required 而是使用 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>
            );
        }
    });

我在 header 标签中添加了 Jquery 的导入。我还在我的 body 中添加了一个标签来引用我的 droptables.js 文件。最后，我添加了一个 Jquery 函数，使我的 monsterLoot 数组等于来自外部 js 文件的 AbyssalDemon 数组。我在文档就绪函数中执行此操作，因为我相信我的问题的一部分是我的页面试图在导入 monsterLoot 数组之前生成我的按钮，因此它抛出错误，因为数组未定义。至少那是我的猜测。不过现在可以用了！

如何从 ReactJs .html 文件访问存储在 .js 文件中的数组？

How do I access an array stored in a .js file from a ReactJs .html file?

javascript

arrays

import

export

reactjs