svcjs-react v0.1.1

RouteView

a route view component based svcjs for react

example for RootView

import React from 'react' import S from 'svcjs';

import RouteView from './RouteView' import LoadingView from './common/LoadingView' import LoginView from './common/LoginView' import MainView from './common/MainView'

class RootView extends RouteView {

constructor(props) {
	super(props);

	this.subViews = {
		loading: LoadingView,
		login: LoginView,
		main: MainView,
	};

	this.state = {
		name: 'root',
		pathName: '',
		baseUrl: '',
		args: {},
		subPaths: [],
	};
	S.bind('route.paths',[this,'subPaths']);
}

render() {
	return this.getSubViews(this.subViews,'single',this.state);
}

}

export default RootView;

example for MainView

import React from 'react' import S from 'svcjs';

import RouteView from '../RouteView' import AView from '../views/AView' import BView from '../views/BView'

class MainView extends RouteView {

constructor(props) {
	super(props);
	this.navs = [
		['a', 'A'],
		['b', 'B'],
	];
	this.subViews = {
		a: AView,
		b: BView,
	};
}

render() {

	return (
		<div style={this.getStyle()}>
			<nav>
                {this.navs.map((data)=> {
                    return (
                        <a onClick={()=> {
                            this.go(data[0]);
                        }} className={(this.getSubName() == data[0] ? 'is-active' : '')}>{data[1]}</a>
                    );
                })}
			</nav>
			<section>
				{this.getSubViews(this.subViews)}
			</section>
		</div>
	);
}

}

export default MainView;

example for location.hash

onhashchange = function (e) { S.go(location.hash.substr(1)); };

S.bind('route.paths', (k, paths)=> { location.hash = '#' + S.routeUrl; });

use route

ReactDOM.render( , document.getElementById('body') ); S.go('/loading'); S.go('main','user?page=2','detail?id=123'); S.go('../list'); S.go('detail',{id=1,showMore=false});