React-pixi 和 Reagent 导致不变违规答案

【问题标题】：React-pixi and Reagent cause an Invariant ViolationReact-pixi 和 Reagent 导致不变违规
【发布时间】：2016-08-07 03:31:24
【问题描述】：

我正在尝试使用 Reagent 和 React-Pixi 在 Clojurescript 中构建游戏，但是一旦我尝试做任何事情，我就会得到：

错误：不变违规：PIXIStage.render() 必须返回一个有效的 ReactComponent。您可能返回了未定义、数组或其他一些无效对象。

重现这种情况的最小情况是：

(ns react-sprites.core
  (:require [cljsjs.react-pixi]
            [reagent.core :as r]))

(def stage (r/adapt-react-class js/ReactPIXI.Stage))
(defn root [] [stage {:width 300 :height 300}])

(r/render-component [root]
                    (. js/document (getElementById "app")))

具体来说，使用react-pixi 和reagent 版本：

[reagent "0.6.0-rc"]
[cljsjs/react-pixi "0.8.1-0"]

其他信息

我已经在调试器中进行了跟踪，并且在 canvas 上引发了不变的违规行为，这是由 React.createElement("canvas") 在 ReactPIXI's render() method 中生成的，因此显然正在创建的画布不是有效的 @ 987654329@。我真的不知道从这里去哪里。

【问题讨论】：

嘎！它开始自发地工作，我将不得不再次尝试打破它，以便弄清楚发生了什么变化。

标签： reactjs clojurescript pixi.js reagent

【解决方案1】：

事实证明，这里的问题归结为版本不兼容。我以为我在 Reagent 0.6 上运行并使用最新的 React，但似乎该应用程序没有得到正确更新，并且仍在使用 0.5.1，它使用与 react-pixi 不兼容的 React 版本。为了修复它，我不得不强制更新，此时它开始工作。在重现此问题时，我也遇到了浏览器缓存问题。

总的来说，值得尝试的事情包括：

$ lein clean
# edit the dependency information
$ lein figwheel

清除缓存
降级然后升级版本（也许？）

附带说明一下，我在调试时发现的其他错误消息的组合使我误入歧途，其中一些警告页面上可能运行了多个 React 版本。由于我没有得到其中一个，我过早地排除了这种可能性。

【讨论】：

【解决方案2】：

有一个名为puck 的库，它是围绕 PixiJS 的 ClojureScript 包装器。这可能是在构建游戏中应用 ClojureScript 的另一种途径。

【讨论】：