React搭建整体页面

1. 搭建结构如下图的页面

2. 具体实现

class Layout extends React.Component {
    render() {
        return (
            <header class="header">头部</header>
            <div class="main-wrap">
                <nav class="nav">导航</nav>
                <div class="main">{this.props.children}</div>
            </div>
        )
        
    }
}

使用该组件

import Layout from './Layoout';
class UserInfo extends from React.Component {
    render() {
        return (
            <Layout>
                <div>
                    主体内容
                    ...
                </div>
            </Layout>
        )
    }
}