未加载反应脚本

Question

我有以下脚本：

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

Answer 1

我想是因为您在 ReactDOM.render 上使用了 document.body，所以您不小心删除了 app.js 脚本。

尝试使用 div 作为挂载点，看看是否能解决您的问题。

例如

ReactDOM.render(<App />, document.getElementById('stageContainer'));

Answer 2

当你在 React 中使用独立的 babel 时，你需要配置你想要编译脚本的 babel 预设。

您可能需要这样的东西：

    <script>
        Babel.registerPreset('myPreset', {
            presets: [[Babel.availablePresets['es2015-loose'], { modules: false }], [Babel.availablePresets['react']]],
            plugins: [[Babel.availablePlugins['transform-modules-umd']]],
        });
    </script>

    <script type="text/babel" src="app.js" data-presets="myPreset"></script>

请注意，脚本标签上的数据预设属性告诉 babel 使用您定义的预设。

Answer 3

当使用 babel 将 reactjs 与浏览器一起使用时，您不需要使用 import ，这是我如何使用浏览器创建运行的简单应用程序（请注意，我没有使用 create-react-app ）： app.js

const App = () =>{
return <h1>Test App</h1>
 };
ReactDOM.render(<App/>, document.getElementById('root'));

您可以在 index.html 中将此组件用作

<!doctype html>
   <html>
     <head>
        <meta charset="utf-8">
          <title>Hello World</title>
      </head>

   <body>
<!-- some HTML -->
<div id="root"></div>
<!-- some other HTML -->

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- babel is required in order to parse JSX -->

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- import react.js -->

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script>
<!-- import react-dom.js -->

<script type="text/babel" src="/app.js"></script>
<!-- import your JS and add - type="text/babel" - otherwise babel wont parse it -->
  </body>
</html>

我已经测试过了，对我有用，希望对你有帮助

未加载反应脚本

react script not being loaded

javascript

reactjs

react-dom