javascript - react 脚本未加载

标签 javascript reactjs react-dom

我有以下脚本:

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/

相关文章:

javascript - 范围更改后指令未刷新

javascript - 如何在 React 组件内为整数数据类型初始化状态?

reactjs - react 测试库渲染 VS ReactDOM.render

javascript - ReactDom 未定义

javascript - Firebase 注册用户 - 在 Node 中存储用户与在注册用户中存储用户

javascript - 使用滚轮放大/缩小

javascript - socket.io 基本发出和监听器失败

reactjs - React Hooks-如何从查询字符串获取参数值

reactjs - React-router-dom 和 Redirect 没有被添加到历史记录中?

jquery - reactjs - 在 react 树之外公开 react 组件方法