使用React的ScalaJS:无法在运行时找到React

时间:2017-02-12 08:48:12

标签: sbt scala.js scalajs-react

我想用 ScalaJS React 来引导一个简单的项目。 它使用fastOptJS构建,然后我使用Chrome打开我的index.html,我在运行时收到此错误:

enter image description here

显然,React的运行时在浏览器中不可用。在documentation中,它没有提及任何单独的React导入,只是build.sbt的配置。

我真的无法理解我做错了什么。

这是我的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>The Scala.js Tutorial</title>
  </head>
  <body>
    <!-- Include Scala.js compiled code -->
    <script type="text/javascript" src="./target/scala-2.12/hello-fastopt.js"></script>
    <!-- Run tutorial.webapp.TutorialApp -->
    <script type="text/javascript">
      web.TutorialApp().main();
    </script>
  </body>
</html>

这是我的TutorialApp.scala

package web

import japgolly.scalajs.react._
import org.scalajs.dom
import scala.scalajs.js.JSApp
import scala.scalajs.js.annotation.JSExport
import japgolly.scalajs.react.ReactComponentB
import japgolly.scalajs.react.vdom.prefix_<^._

object TutorialApp extends JSApp {

  @JSExport
  def main(): Unit = {
    println("Hello world!")

    val App =
      ReactComponentB[Unit]("App")
        .render(_ => <.div("Hello!"))
        .build

    ReactDOM.render(App(), dom.document.body)
  }

}

1 个答案:

答案 0 :(得分:0)

您需要全局(通过<script>中的index.html标签)或使用网络标记。

如果您想使用webjars / jsDependencies,可以查看https://github.com/tastejs/todomvc/blob/gh-pages/examples/scalajs-react/build.sbt

jsDependencies ++= Seq(
  "org.webjars.bower" % "react" % "15.2.1" / "react-with-addons.js" minified "react-with-addons.min.js" commonJSName "React",
  "org.webjars.bower" % "react" % "15.2.1" / "react-dom.js"         minified "react-dom.min.js" dependsOn "react-with-addons.js" commonJSName "ReactDOM"
)

另请注意,在index.html他们已添加

<script src="generated/todomvc-jsdeps.js"></script>

确保在页面上加载JS依赖项。您需要根据项目名称更改*-jsdeps.js的名称。