如何在 reactjs 组件中使用通过 scalajs 导出的函数？

Question

我尝试使用 @JSExportTopLevel 注释将一些函数导出到 scalajs 中的 main.js 文件，如 Export Scala.js APIs to JavaScript scalajs documentation and building the main.js as explained here.

中所述

这导致 main.js 我可以使用在 scalajs 代码中导出的函数。

现在我想在我的 reactjs 组件中使用这些导出的函数。为此，我尝试了以下步骤：

将 main.js 文件复制到 public 文件夹
在 index.html 中包含 javascript 文件，如下所示：

<script type="text/javascript" src="./main.js"></script>

现在，如果我在浏览器中加载应用程序并尝试在浏览器控制台中使用这些功能，它工作正常：

console.log(foo());

但我不会在 reactjs 组件中使用这些函数:

import React from 'react';

const RuleEditor = () => {

    console.log(foo());

    return (
        <>
        </>
    );
};

export default RuleEditor;

我总是遇到以下编译错误：

foo is not defined  no-undef

我知道 reactjs 无法识别该函数，因为我没有真正指定从哪里获取该函数，但我不确定如何实现它。我看过其他几个 Whosebug 帖子，其中有一些建议可以在 window 对象中查找它，但我没有在那里找到那些函数。

请建议在 reactjs 组件中使用从 scalajs 导出的函数的正确方法。 TIA.

Answer 1

导出 objects/classes/functions 作为顶级导出将它们置于 Javascript 全局范围内。

class Foo(val x: Int) {
  @JSExport
  def square(): Int = x*x // note the (), omitting them has a different behavior
  @JSExport("foobar")
  def add(y: Int): Int = x+y
}

您可以在 html 或 scalajs 中嵌入的脚本中使用这些函数，如 here 所示。

但是如果你需要在nodejs应用中使用这些函数，你需要从一个模块中导出这些函数。我们需要在 build.sbt 中添加以下内容。阅读更多 here.

scalaJSLinkerConfig ~= { _.withModuleKind(ModuleKind.ESModule) }

现在，我们可以像这样导入它们，在 nodejs 应用程序中使用导出的函数：

import { square, add } from './main'

如果您希望从 main 以外的模块中导出这些函数，请为每个导出的函数提供模块 ID，如下所示：

class Foo(val x: Int) {
  @JSExport("square", "my-math")
  def square(): Int = x*x // note the (), omitting them has a different behavior
  @JSExport("foobar", "my-math")
  def add(y: Int): Int = x+y
}

并像这样使用它：

import { square, add } from './my-math'

如何在 reactjs 组件中使用通过 scalajs 导出的函数？

How to use functions exported using scalajs in reactjs components?

javascript

reactjs

scala.js