问题标签 [scalajs-react]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
187 浏览

scalajs-react - 子节点应该如何传递给 ReactComponent

我已经使用 scalajs-react 几个星期了,到目前为止,我从未使用过 ReactComponentC.apply() 的“children”参数,因为我的孩子 ReactNodes 通常在 c.backend.render() 中有条件地定义。难道我做错了什么?在 ReactComponentC.apply() 中传递子节点有优势吗?在 ReactComponentC.apply() 运行后,我有什么方法可以动态修改这个子列表?

基本上我只是想知道将孩子传递给 ReactComponentB 与在父组件的渲染方法中创建 ReactComponentB 的实例有什么优势。例如:

0 投票
0 回答
218 浏览

scala - 斯卡拉宏。如何实例化子类和动态混合特征

动机:

(与该主题没有紧密关联,但说明了一个用例。可跳过)

Scala.js用来编写React代码。我现在有一个form包含一堆inputs,每个onChange callback在它的道具中都需要一个。请参阅受控组件

问题是:info它与 无关React,但一直与它耦合。我会将控制逻辑与 Web 内容分开。所以我做了:

这只解决了一半的耦合问题。因为TextInputCtrl必须在 React 组件中编写实现才能访问状态。也一样new Input(...),除非TextInputCtrl公开。但是如果你这样做了,你就会在外面携带 React 逻辑。

出色地。如果 trait 可以动态混合到 instance中。Input我可以在其他地方创建一个不受控制的干净实例,并将其传递给 React 组件。灵活得多。这甚至提供了以下杠杆作用:

所以,我做了一些尝试:

问题:

我想使用这个简单的哲学:

但通过宏:

我达到了成功的编译。但在运行时失败:

它抛出:

有什么问题?

这不是问题scala App

==================================================== =

讨论达到脱钩目标的其他方法:

其他方法:(但可能不是最好的解决方案

下面两者都失去了自我类型特征直接访问其他字段的能力。并且难以增量链接或部分覆盖控制逻辑。

或者:

0 投票
1 回答
225 浏览

scala.js - scalajs-react 何时允许使用 runNow(),为什么?

这里runNow方法有文档:

这有点模糊,并导致四个问题:

  1. 我什么时候不应该打电话runNow()?为什么 ?
  2. 是不是我不应该(或不必)打电话的唯一情况runNow()是当我使用带有==>or的回调时(如此-->所述)?(我猜这是真的)或者当框架为我调用时还有其他情况吗?runNow()
  3. 我什么时候可以打电话runNow()?为什么 ?
  4. 为什么不一直使用runNow?这会导致任何问题吗?如果是,是什么?

我目前的理解是可以(甚至需要)runNow()已作为回调传递给包装的本机 JS 反应组件的 scala 函数调用。例如这里

不过我不确定。

有人可以澄清什么时候可以打电话,什么时候不可以打电话runNow()吗?

0 投票
1 回答
512 浏览

scala - 如何在 scalajs-react 中使用类型参数化的组件

我将 scalajs 0.6.15 与 scalajs-react 0.11.3 和 reactjs 15.4.2 一起使用。

考虑一个组件SomeComp,其中值的类型Props需要参数化。

由于在使用组件构建器时需要知道类型,因此我将组件包装在一个类中。

这行得通。问题是,组件会随着父级的每次重新渲染而重新安装,除非用户SomeComp首先创建一个实例并在父级的方法SomeComp中使用该实例。render

我避免这种情况的黑客解决方案是:

有没有更好、更少的锅炉代码、更不可怕的方法?有什么建议么?


在@Golly (感谢您的详尽回答!)建议之后更新我发现第二个解决方案最优雅,并希望在此处发布以确保完整性:

0 投票
1 回答
291 浏览

scala - ScalaJs:如何使用 contentContainerStyle 定义 ScrollView

在 ScalaJs 中,我想使用 justifyContent 和 alignItems 样式属性,但是当我通过正常样式执行此操作时,它会说:

ScrollView 子布局 (["alignItems", "justifyContent"]) 必须通过 contentContainerStyle 属性应用。

如果可能,请分享一些代码

0 投票
1 回答
179 浏览

scala - 如何使用 react-native 导入 Scalajs Facade?错误:$g.algoliasearch 不是函数

我想在我的 scalajs 应用程序中使用外观 Algoliasearch,我通过 sbt 导入它,但在 UI 上我看到 $g.algoliasearch 不是一个函数。我认为这是因为缺少 javascript 库。我在 package.json 中包含了 Algoliaseach-client-javascript 依赖项,并安装了它。

现在我不确定当我使用外观时如何提供/链接这些依赖项。如果有人可以提供一些有用的示例代码

我说的是这些门面中的任何一个https://github.com/DefinitelyScala/scala-js-algoliasearch

我已经添加了这样的 jsDependencies

jsDependencies ++= Seq( "org.webjars.bower" % "github-com-algolia-algoliasearch-client-javascript" % "3.18.1" / "3.18.1/reactnative.js" ) 我希望上面会在我的 scalajs.output.ios 文件中声明这样的内容 var Algoliasearch = require(...) 但我没有看到任何这样的条目并且我仍然不确定如何导入它以避免以下错误:

$g.algoliasearch 不是函数

请帮助我在这里缺少什么?

0 投票
1 回答
376 浏览

scala - 对不可变数据中的引用做出反应

我正在寻找有关处理在不可变数据中使用 id/ref 链接所产生问题的方法的输入(特别是使用 Scala-js 和 scala-js-react 的 React,但我认为这些解决方案可能对任何人都通用类似的系统,例如 javascript 中的 React,或其他反应系统)。

这个概念是在我的数据中使用 aRef[A]代替 an A,其中将从数据中的多个位置引用同一项目。

Ref[A]将至少包含一个Id[A]允许以某种方式查找数据的内容 - 稍后会提供更多详细信息。

这允许在一个地方更新数据,然后仍然可以从其他地方引用该更新版本。

为了描述这个问题,我们可以从一个没有引用的不可变数据模型的系统开始——在这种情况下,我可以知道如果数据 x 和 y 的两个版本相等,则数据中没有任何变化。我们可能有类似的东西Post(User("Alice", "alice@example.com"), "Hello World")- 所有数据都包含在模型中,我们可以将不同Post的 s 作为普通数据进行比较。

我们还可以使用镜头来浏览数据,并且始终适用相同的逻辑。

然而,用户的电子邮件完全有可能在未来发生变化,我们可能不想留下散落在我们所有帖子中的过时电子邮件,或者必须更新帖子的数据以匹配新电子邮件。为此,我们可以引入 Refs。

为了更新这个例子,我们可以引入一个Ref[A]id 字段,其中包含Id[A]A 类型的引用对象。我们现在有了Post(Ref(Id(42)), "Hello World"), 和User(Id(42), "Alice", "alice@example.com")。要显示 Post,我们需要(以某种方式)跟随 Ref 从 Post 到 User 实例。如果 Alice 的电子邮件地址发生变化,Post 数据中的任何内容都不会发生变化——我们仍然只有一个 Ref(42)。

这在一方面是好的——当我们遵循 Ref 时,我们将获得新数据。然而,对于像 React 这样的系统来说,这是一个问题,我们需要通过比较模型的旧版本和新版本来判断模型何时发生了变化。我们一般会将数据模型作为 Props 的一部分进行传递,然后使用相等性比较新旧 props,看看它们是否发生了变化。当用户的电子邮件发生变化时,这将导致 Post 的呈现完全不改变。

对此的解决方案似乎很明显,将完整的引用数据集包含在Cache提供Id[A] => Option[A]. 然后,当任何 Id 引用的数据发生更改时,它将被新的 Cache 替换。这将被视为数据模型的一部分,并与它一起传递,例如作为(A, Cache). 我们仍然可以在 A 上使用镜头,并保持相同的缓存。当 Cache 发生变化时,(A, Cache)也会发生变化,让我们再次看到变化。我们确保我们遵守 React 组件的契约(至少是那些没有状态的组件),即渲染的输出只需要在 Props 发生变化时发生变化。

这里的问题是,(A, Cache)每当缓存中的任何项目发生变化时,都会发生变化,并且我们可能在缓存中拥有与任何给定组件无关的各种数据。这为我们提供了所需的更改,但也有许多无意义的更改导致浪费的重新渲染。

我觉得可能有更好的方法来处理这个问题,但我还没有找到任何东西。有没有解决这个问题的一般方法?

0 投票
1 回答
152 浏览

vert.x - 带有 Scala.js 的 Vertx Eventbus 客户端

我正在尝试在 Scala.js 项目中创建一个新的 Vertx Eventbus 实例。无论我做什么,尝试在 onopen 函数中注册处理程序时都会收到 INVALID_STATE_ERR 。

似乎 onopen 被过早地解雇了。

示例代码:Eventbus.scala:

}

然后,从我的应用程序中,我称之为:

0 投票
1 回答
169 浏览

scalajs-react - 不要使用 scalajs-react 在 Treeview 中重新渲染兄弟姐妹

我用 scalajs-react 构建了一个简单的 TreeView。每个节点都包含一个文本字段。

我在 child 中写了一些文字1.1

在此处输入图像描述

现在,如果我在1.2下面添加新1的子节点,文本就会消失,因为节点1及其所有子节点都被重新渲染:

在此处输入图像描述

在此 Javascript-Redux TreeView中添加子项时,不会重新渲染兄弟姐妹。如何使用 scalajs-react 实现这一目标?

请参阅下面的代码或GitHub 上的最小示例项目。

0 投票
1 回答
81 浏览

scalajs-react - 在 scalajs-react 中使用带有后端的 StateSnapshots

StateSnapshot 示例中的主要组件不使用后端,但我需要一个。我的尝试:

value firstName is not a member of object app.TreeView.Name我在行中得到编译错误val surnameV = StateSnapshot.zoomL(Name.surname).of(name)