0

react-routerを使ったアプリで下記のルーターを定義して、一番外側のRootにmaterial-uiのAppBarとLeftNavを定義しましたがそれらが表示されませんし、divも表示されていません。しかしその子供のViewは表示されています。

router.js

export default (
  <Route path="/" component={Root}>
    <Route path="path1" component={App1}/>
    <Route path="path2" component={App2}/>
    <Route path="path3" component={App3}/>
  </Route>
);

Root.react.js

import React, { Component } from 'react';
import { LeftNav, MenuItem, AppBar } from 'material-ui';

class Root extends Component{
  static propTypes = {
    children: React.PropTypes.any
  };

  constructor(props){
    super(props);
    this.state = {
      open: false
    };
  }

  leftButtonTouched(){
    this.setState({
      open: !this.state.open
    });
  }

  render(){
    return (
      <div>
        {this.props.children}
        <AppBar
          iconClassNameRight="muidocs-icon-navigation-expand-more"
          onLeftIconButtonTouchTap={this.leftButtonTouched}/>
        <LeftNav open={this.state.open}>
          <MenuItem>Item1</MenuItem>
        </LeftNav>
      </div>
    )
  }
}

どこを修正すればAppBarとLeftNavを表示できるのでしょうか。ご教授ください。

1 件の回答 1

0

自己解決しました。Rootのexport宣言が抜けていました。なぜこれで動いていなたのかはなぞです。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。