个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我只是在学习 reactjs - 我正在学习教程。我不明白的是为什么当我在代码中包含我的 React 脚本时它起作用(第一个片段)。但是，当我将脚本代码提取到单独的 .js 文件(第二个片段)时，它不起作用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
第二个片段:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="Scripts/custom/react.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
react.js 文件:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
请注意，我已将上述 js 文件包装在 <script type="text/babel"></script> 中这也不起作用。
我也在 Code Review 网站上问过这个问题，但是，我不确定它是否属于那里。
如以下评论所述，我确实看到语法错误，在 <h1>Hello, world!</h1>, 上突出显示行。
最佳答案
尝试使用 .jsx 扩展名和 text/babel 类型命名文件。你必须使用 Babel 的 .jsx 扩展来知道如何转换它，使用哪个加载器等。使用你当前的 .js 扩展，Babel 看到一个常规的 JavaScript文件并没有做任何事情，因此发生错误。此外，在您的 div 之后 包含您的自定义脚本，因为 React 必须等待加载 root 才能插入任何内容——而且，重命名你的文件，这很困惑:
<div id="root"></div>
<script type="text/babel" src="Scripts/custom/react.jsx"></script>
关于javascript - 将 react.js 分离到它自己的文件中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47847206/
25
4
0
我在尝试使用 jpa2.0 将包含持久实体和分离实体(新创建的实体)的实体列表更新到我的数据库中时遇到错误。 我的实体包含在合并数据时出现错误(在标题中提到)的内部实体: Class supercla
我在分层 Pane 中有一组面板。我需要一个分隔符来将 sideBar 与 topBar 和 tabbedPanel 分开。我留了一个 10 像素的缓冲区来放置它。不幸的是，可能由于它是 JLayer
在我从数据库中读取的代码中，我还使用自定义适配器打印出每一行，该行中有一个 texttview、2 个按钮和一个 edittext。这一切都很好，但是当按下按钮时，edittext 会递增或递减，有没
我有一个由 Hibernate 4.3.4 管理的实体，它有一个其他实体的一对多集合。 在我的处理过程中，我必须分离父实体(将分离级联到子列表)。但是，当我向列表中添加一个尚未持久化的新项目并执行分离
我想追加一行，该行应该是表格的最后一行。在我的代码中，它似乎在第一次动态添加行时起作用。但是当添加其他行时它不会成为最后一行。 我总是希望“subtot”行成为最后一行，但是当我追加其他行时，它不
我试图用它们之间的空格分隔这 2 个 div(请参见图 1)。问题是当我添加边距或填充时会发生这种情况(请参见图 2)。 这是我的代码，请注意我没有使用 Bootstrap: .row { mar
我的服务器包含一些 ServerActor。该 actor 接收 RegisterClient 消息并将 ActorRefs 添加到已注册客户端列表中。 我还有多个客户端，每个客户端都包含 Clien
假设我有一个需要两个参数的函数，并且参数的顺序会影响结果。 是否可以将第一个参数传递给 partial 或 comp 函数，然后将另一个参数传递给它，如下所示: (defn bar [arg1 arg
如何搜索和分离多个后代键。 例子: (def d {:foo 123 :bar { :baz 456 :bam { :w
我正在尝试为 Slick 表创建一个类型安全的动态 DSL，但不确定如何实现这一点。 用户可以通过以 form/json 格式发送过滤器来将过滤器发布到服务器，我需要使用所有这些来构建一个 Slick
我是新来的，我发现看到充满大量函数和变量初始化以及 UI 的组件时眼睛很痛。是否可以将它们分开？ 而不是默认设置，如下所示。如何将业务逻辑分离到另一个文件中？ function MyComponent
我试图通过将参数粘贴在一起来使用分离。这应该是一件容易的工作，但不适合我。当我想到使用 eval(parse()) 时，我知道是时候寻求帮助了 通常，如果我加载一个包，我可以按如下方式分离它: det
(dissoc :a m)允许我解除给定的键。但是，有没有办法使用谓词函数来分离 pred 为真的任何键？ (dissoc-with-pred pred? m) 所以给了一张 map - {:a 2
我编写了一个使用 devtools 来包含内部数据的包: devtools::use_data(.data, internal = T, overwrite = T) 我最近更改了该数据并重建了包。我
所以我有一个脚本，我想在我的服务器上运行它而不会打扰我。所以我想我会在 tmux 窗口中运行服务器，然后 detach这样我就可以简单地 attach如果我想查看进度(此脚本需要数天才能运行)。 但是
ThreeJS中动画数据和模型数据是否可以解耦？ 这样就可以交换模型并保留动画？我认为这可能非常强大 我知道如何在 ThreeJS 中做到这一点的方法是将每个动画一个接一个地打包在一个模型中，这似乎是
我有一堆(Ruby)脚本存储在服务器上。到目前为止，我的团队通过打开一个启动脚本名称列表的访问器应用程序来使用它们，然后他们在工作文件夹中的文件上选择要在该实例中运行的脚本。脚本直接从服务器运行，因此
我想知道 javascript 如何包含在 jsp 中 - 我们是否可以在 .js 文件中放置 jsp 能够识别的任何代码，而不仅仅是 javascript 代码？ 我有一些常见的 JavaScrip
您是否可以在 Dockerfile 中指定一个选项，默认使用它构建的容器以分离方式运行。 这将导致与 -d 相同的结果: docker run -d 这样 docker run 默认情况下会分离运
我正在为现有的 Java 程序开发 Java 插件。现有程序使用特定版本的 eclipse.uml2.*，我的插件也是如此。不幸的是，我的插件需要更新版本。 为了运行该插件，我需要将其导出到 Jar
我是一名优秀的程序员,十分优秀！