Использование response-router без JSX

Я пытаюсь найти пример использования response-router через API javascript, но пока ничего не могу найти.

Моя цель - использовать реактивный маршрутизатор с реагентом и clojurescript. Так что, если у кого-то это работает (даже с Ом), я буду признателен за толчок в правильном направлении. В противном случае будет полезен простой пример javascript без JSX.

Изменить 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}"})))

Подсказка: вы можете выполнить преобразование JSX- ›JS, используя JSXTransformer.js для вашей версии React. Просто включите его на свою страницу и используйте консоль разработчика своего браузера для выполнения 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. Итак, все, что осталось, это выяснить, как сгенерировать компоненты в форме, которая проходит этот тест. Для этого у меня есть вопрос о переполнении стека.


reactjs react-router clojurescript reagent
person erikcw    schedule 05.11.2014    source источник

Ответы (3)


arrow_upward
10
arrow_downward

В версии 0.12 в JavaScript это выглядит так:

var Router = require('react-router');
var Route = React.createFactory(Router.Route);
var DefaultRoute = React.createFactory(Router.DefaultRoute);
var NotFoundRoute = React.createFactory(Router.NotFoundRoute);

React.render((
  React.createElement(Router, {location: "history"}, 
    Route({path: "/", handler: App}, 
      DefaultRoute({handler: Home}), 
      Route({name: "about", handler: About}), 
      Route({name: "users", handler: Users}, 
        Route({name: "recent-users", path: "recent", handler: RecentUsers}), 
        Route({name: "user", path: "/user/:userId", handler: User}), 
        NotFoundRoute({handler: UserRouteNotFound})
      )
    ), 
    NotFoundRoute({handler: NotFound})
  )
), document.body);
person Brigand    schedule 05.11.2014

arrow_upward
5
arrow_downward

Пример без JX и без использования createElement (что для меня не имеет смысла в случае маршрутов):

// this snippet was tested with react 0.13.1 
// and react-router 0.13.2
import Router from 'react-router';
import App    from './components/App';
import Inbox  from './components/Inbox';

const AppRoute = Router.createRoute({
  path: '/',
  name: 'app',
  handler: App
});

const InboxRoute = Router.createRoute({
  name: 'inbox',
  handler: Inbox,
  parentRoute: AppRoute
});

// Important: you have to export the root route wrapped in array 
export default [AppRoute];
person Misha Reyzlin    schedule 11.04.2015

arrow_upward
2
arrow_downward

Я только что закончил собирать экспериментальный репозиторий для выполнения этого https://github.com/ghedamat/reagent-react-router

Основная идея заключается в использовании нового API, который Reagent предоставляет начиная с версии 0.5.0-alpha3 для взаимодействия с React.

reagent/reactify-component позвольте вам использовать компоненты реагента в коде React (это то, что требуется маршрутизатору)

и reagent/adapt-react-class позволяет наоборот.

Я пытаюсь обернуть такие компоненты, как Link и RouterHandler, и использовать их непосредственно в реагенте.

i.e:

[:ul.nav.navbar-nav
  [:li
    [Link {:to "app"} "home"]]
  [:li
    [Link {:to "about"} "about page"]]]

И наоборот, вы можете передать компоненты Reagent как handlers объекту ReactRouter.Router.

(def routes
  (Route {:name "app" :path "/" :handler app-page}
    (Route {:name "about" :path "about" :handler about-page}))
  (DefaultRoute {:handler default-page-meta})))

Реализация довольно проста (и похожа на ваш обновленный вопрос): https://github.com/ghedamat/reagent-react-router/blob/master/src/cljs/reagent_react_router/react_router.cljs Более подробное обсуждение можно найти в README.

Пока он работает, но определенно можно было бы использовать больше входов / помощи.

person ghedamat    schedule 18.02.2015