Блог

Главная - Вопросы по программированию - Как использовать функции, экспортируемые с помощью scalajs, в компонентах reactjs?

Как использовать функции, экспортируемые с помощью scalajs, в компонентах reactjs?

#javascript #reactjs #scala.js

Вопрос:

Я попытался экспортировать некоторые функции в main.js файл в scalajs с помощью @JSExportTopLevel аннотации, как описано в разделе Экспорт Scala.js API к документации JavaScript scalajs и построению main.js , как описано здесь.

Это приводит к main.js тому, что я могу использовать функции, экспортированные в коде scalajs.

Теперь я хочу использовать эти экспортированные функции в своих компонентах reactjs. Для этого я попытался выполнить следующие действия:

  1. Скопируйте main.js файл в public папку
  2. Включите файл javascript в index.html , вот так:
 <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 не может распознать функцию, так как я на самом деле не указал, откуда взять эту функцию, но я не совсем уверен, как ее достичь. Я перешел к паре других сообщений stackoverflow, где были некоторые предложения, где его искать в window object, но я не нашел там этих функций.

Пожалуйста, предложите правильный способ использования функций, экспортированных из scalajs, в компонентах reactjs. ТИА.

Комментарии:

1. Как он себя чувствует React.js компонент пытается вызвать функцию? Вы показали нам код, который работает, но не тот, который не работает. Это затрудняет нам оказание вам помощи.

2. @sjrd console.log(foo()) при попытке в браузере возвращает правильный результат, но тот же оператор в компоненте reactjs не удается скомпилировать

3. @sjrd обновите вопрос примером кода. Надеюсь, этого будет достаточно.

Ответ №1:

Экспорт объектов/классов/функций в качестве экспорта верхнего уровня помещает их в глобальную область 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, как показано здесь.

Но если вам нужно использовать эти функции в приложении nodejs, вам необходимо экспортировать эти функции из модуля. Нам нужно добавить следующее в build.sbt . Подробнее читайте здесь.

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

Теперь мы можем использовать экспортированные функции в приложении nodejs, импортировав их следующим образом:

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

Если вы хотите экспортировать эти функции из модуля с именем , отличным от main , укажите идентификатор модуля для каждой экспортируемой функции следующим образом:

 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'
Метки: , ,