8

javascript API を介して react-router を使用する例を見つけようとしていますが、これまでのところ何も見つかりませんでした。

私の目標は、react-router を試薬と clojurescript で使用することです。したがって、誰かがこれを機能させた場合 (Om を使用しても)、正しい方向に進んでいただければ幸いです。それ以外の場合は、JSX を使用しない単純な JavaScript の例が役立ちます。

編集 1 -- 解決策に近づく

JSX をプレーンな JS に変換する手助けをしてくれた @FakeRainBrigand に感謝します。

これが 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}"})))

JSXTransformer.jsヒント:お使いのバージョンの Reactを使用して 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。あとは、そのテストに合格する形でコンポーネントを生成する方法を理解するだけです。そのために投稿されたスタックオーバーフローの質問があります。

4

3 に答える 3

10

JavaScript の 0.12 では、次のようになります。

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);
于 2014-11-05T20:54:31.970 に答える
5

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];
于 2015-04-11T15:52:43.463 に答える
2

I've just finished putting together an experiment repository for doing this https://github.com/ghedamat/reagent-react-router

The main idea is using the new apis that Reagent provides since version 0.5.0-alpha3 for interop with React

reagent/reactify-component let's you use reagent components in React code (which is what the router requires)

and reagent/adapt-react-class enables the vice-versa.

What I'm attempting to do is wrap Components like Link and RouterHandler and use them directly in reagent.

i.e:

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

Conversely you can pass Reagent's components as handlers to the ReactRouter.Router object.

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

The implementation is quite simple (and similar to your updated question): https://github.com/ghedamat/reagent-react-router/blob/master/src/cljs/reagent_react_router/react_router.cljs Look at the README for a more in-depth discussion.

It's working so far but could definitely use more inputs/help.

于 2015-02-18T17:02:51.447 に答える