react-redux-boilerplate-scripts/src/view/layout/main/index.jsx

react-boilerplate-app-scripts

import React from 'react'
import { PropTypes } from 'prop-types'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import Locale,{ localeLayout }from 'r2-js/libs/decorator/Locale'
import BreadCrumb from 'r2-js/libs/decorator/BreadCrumb'

import logo from 'src/style/img/logo.svg'
import 'src/style/css/bootstrap.css'
import 'src/style/css/layout-main.css'

@connect((state)=>{
  return {
    changedLocale: state.locale.changedLocale,
    defaultLocale: state.locale.defaultLocale,
  };
})

//in layout view BreadCrumb must after redux @connect
@BreadCrumb
@localeLayout()
class LayoutView extends React.Component {

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

  render() {
    var breadcrumbs =  this.getBreadCrumbs();
    //add common breadcrumbs
    breadcrumbs.unshift({
      label: "Home",
      link: "/",
    });
    return (
      <div className="layout-container">
        <nav className="navbar navbar-inverse ">
          <div className="container-fluid">
            <div className="navbar-header">
              <a className="navbar-brand" href="#">
                <img src={logo} className="App-logo" alt="logo" />
              </a>
            </div>
            <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
              <ul className="nav navbar-nav">
                <li>
                  <Link to="/">
                    { this.t('Home') }
                  </Link>
                </li>
                <li>
                  <Link to="/about">
                    { this.t('About') }
                  </Link>
                </li>
                <li className="language">
                  <Link onClick={ this.changeLanguage("zh_CN") }>
                    中文
                  </Link>
                </li>
                <li className="language">
                  <Link onClick={ this.changeLanguage("en_US") }>
                    English
                  </Link>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        {
          breadcrumbs && 
          <ol className="breadcrumb">
            {
              breadcrumbs.map((v,k)=>{
                return (
                  <li key={ k }>
                    {
                      v.link && 
                      <Link to={ v.link }>
                        { this.t(v.label) }
                      </Link>
                    }
                    { 
                      !v.link && 
                      this.t(v.label) 
                    }
                  </li>
                )
              })
            }
          </ol>
        }
        <div className="main-contents">
          { 
            //When using internationalization,defaultLocale and changeLanguage
            //must be passed to the children's props.
            //Use cloneElement to pass some props to children.
            //You also can use redux connect to pass defaultLocale and changedLocale.
            //But it's not recommended.
            React.cloneElement(this.props.children,{
              defaultLocale: this.props.defaultLocale,
              changedLocale: this.props.changedLocale,
            }) 
          }
        </div>
      </div>
    )  
  }
}

export default LayoutView;