Question

好吧，我已经尝试过自己解决这个问题而且我不能这样做。我正在为我在线玩的游戏制作战利品记录网络应用程序。 Web应用程序托管在pythonanywhere上。它完全在主html文件中的ReactJS中编码，因此没有数据库或类似的东西。我为像

这样的数组中的不同怪物存储战利品表

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

等......战利品阵列比这长得多，但你明白了。我让代码正常工作，使用这些数组来获取项目名称和图像路径等等。我想如果我现在要添加更多的怪物我的代码工作，我应该将这些数组重新定位到一个单独的文件。我打电话给这个文件＆＃39; droptables.js＆＃39;。我将它保存在与主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等于来自其他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>
            );
        }
    });

我在标头标签中添加了Jquery的导入。我还在我的身体中添加了一个标签来引用我的droptables.js文件。最后，我添加了一个Jquery函数，使我的monsterLoot数组等于外部js文件中的AbyssalDemon数组。我在文档就绪函数中做了这个，因为我相信我的问题的一部分是我的页面在导入monsterLoot数组之前尝试生成我的按钮所以它因为数组未定义而抛出错误。至少那是我的猜测。它现在可以使用了！

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

1 个答案: