我有以下脚本:
app.js
import React from 'react'
import ReactDOM from 'react-dom'
import {Stage, Sprite} from '@inlet/react-pixi';
const App = () => (
<Stage>
<Sprite image="assets/baseBike.png" x={100} y={100}/>
</Stage>
);
ReactDOM.render(<App/>, document.body);
以及以下内容
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<div id="stageContainer">
</div>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script src="node_modules/pixi.js/dist/pixi.min.js"></script>
<script src="app.js" type="text/babel"></script>
</body>
</html>
现在,当我运行此命令时,控制台中没有错误,但没有呈现任何内容。我也无法发现我的脚本实际上已加载。
如果我删除 type="text/babel"
那么它会抛出一个错误:
Cannot use import statement outside a module
谁能告诉我我可能错过了什么?
更新babel
所以我注意到我缺少 babel,但是添加它后我收到以下错误:
require is not defined
最佳答案
我认为因为您在 ReactDOM.render
上使用 document.body
,所以您不小心删除了 app.js
脚本。
尝试使用 div 作为挂载点,看看是否可以解决您的问题。
例如
ReactDOM.render(<App />, document.getElementById('stageContainer'));
关于javascript - react 脚本未加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59610017/