@munsterlander: thank you. I managed to do it differently with three components (parent and 2 child components ( <SideMenu> and <Navigator> ). In short:
{/* Parent component with initialroute */}
class Main extends Component {
constructor( props ){
super( props );
this.state = {
isOpen: false,
route: { component: Home, key: "HOME_PAGE" }
};
this.hide = this.hide.bind( this );
this.setView = this.setView.bind( this );
this.renderPage = this.renderPage.bind( this );
}
...
renderPage( route, navigator ){
return <Page
renderToolbar={ this.renderToolbar.bind( this ) }
renderFixed={ this.renderFixed.bind( this ) }
>
<this.state.route.component key={ this.state.route.key } navigator={ navigator } { ...route.props } />
</Page>
}
...
render(){ return (
<Splitter>
<SplitterSide
side='left'
isOpen={ this.state.isOpen }
onClose={ this.hide.bind( this ) }
onOpen={ this.show.bind( this ) }
{/* Other options */}
>
<Page>
<SideMenu
hide={ this.hide }
setView={ this.setView }
/>
</Page>
</SplitterSide>
<SplitterContent>
<Navigator
renderPage={ this.renderPage }
initialRoute={ this.state.route }
/>
</SplitterContent>
</Splitter>
Then in the <SideMenu> component you can alter the parents state via the setView function (accessible via this.props.setView):
{ /* Each menu-item has an id ('idx' ). MetuData is an array of objects defined outside of the React component:
const menuData = [
{ index: 1, title: "Home", key: "HOME_PAGE", component: Home },
{ index: 2, title: "Page1", key: "PAGE1", component: Page1 },
{ index: 3, title: "Page2", key: "PAGE2", component: Page2 },
{ index: 4, title: "Page3", key: "PAGE3", component: Page3 }
];
The child component manages the parent state (in this example you import the Pages1/2/3 components in the <SideMenu> component).
*/ }
export class SideMenu extends Component {
constructor( props ){
super( props );
this.setRoute = this.setRoute.bind( this );
}
setRoute( idx ){
const { component, key } = menuData.find( ( item ) => item.index === idx );
this.props.hide();
return this.props.setView( component, key );
}
...
Because of the state changes, React will rerender the parent component. It is probably a more React-style way of implementing this. (I already had this, it wasn’t working because I didn’t have to latest version of the react-onsenui package installed - there was an issue with the <Navigator> component: https://github.com/OnsenUI/react-onsenui/issues/94)