我正在尝试找到一个通过JavaScript API使用react-router的示例,但迄今为止还没有找到任何东西。
我的目标是将react-router与reagent和clojurescript一起使用。因此,如果有人已经实现了这个目标(即使是在Om中),我将不胜感激地接受指引。否则,一个没有JSX的简单javascript示例也会很有帮助。
第1次编辑--接近解决方案
感谢@FakeRainBrigand帮助将JSX转换为纯JS。
以下是React.js 0.11.2版本(这是当前Reagent版本0.4.3使用的版本)。
我的目标是将react-router与reagent和clojurescript一起使用。因此,如果有人已经实现了这个目标(即使是在Om中),我将不胜感激地接受指引。否则,一个没有JSX的简单javascript示例也会很有帮助。
第1次编辑--接近解决方案
感谢@FakeRainBrigand帮助将JSX转换为纯JS。
以下是React.js 0.11.2版本(这是当前Reagent版本0.4.3使用的版本)。
/** @jsx React.DOM */
Routes({location: "history"},
Route({name: "app", path: "/", handler: App},
Route({name: "inbox", handler: Inbox}),
Route({name: "calendar", handler: "{Calendar}"})))
提示:您可以使用适用于React的版本的JSXTransformer.js
来执行JSX->JS转换。只需将其包含在页面中,并使用您的浏览器的开发人员控制台来执行JSXTransformer.transform('/ ** @jsx React.DOM * /<Route location="history">...</Route>').code
。
这是Clojurescript版本:
(ns mytest.core
(:require [reagent.core :as reagent :refer [atom]])
(defn home []
[:div [:h1 "Home Component Placeholder"]])
(defn info []
[:div [:h1 "Info Component Placeholder"]])
(defn build-component [comp]
(reagent/as-component (if (fn? comp) (comp) comp)))
(defn react-router []
(js/ReactRouter.Routes #js {:location "history"}
(js/ReactRouter.Route #js {:name "app" :path "/" :handler (build-component home)}
(js/ReactRouter.DefaultRoute #js {:handler (build-component home)})
(js/ReactRouter.Route #js {:name "about" :path "/about" :handler (build-component info)}))))
很遗憾,Reagent默认创建的组件似乎不是“标准”的React组件,因为React.isValidClass(myReagentComponent) === false
。所以我们需要找出如何生成该测试通过的形式的组件。我在Stack Overflow上发布了一个问题。