react 嵌套子元素中的dom 公共导航栏（每个页面都会公用）

比较基础也很常用的场景
PS：比如我们需要公共导航栏  每个页面都需要的时候 就需要一个底层layout布局  然后每个页面用children渲染

layout组件：

import React,{Component} from 'react'
import Navigation from '../navigation'
import Sidebar from '../sidebar'
import './index..scss'

class Layout extends Component{

    render() {
        let {children} = this.props;
        return (
            <div className="layout">
                <Navigation/>
                <div className='contain'>
                    {children}
                </div>
                <Sidebar/>
            </div>
        )
    }
}
export default Layout

 

home首页：

import React, {Component} from 'react'
import Layout from '../../common/layout'
import style from './index.module.scss'


class Home extends Component {
    state = {
        name: '首页',
        code: 1,
    };
    render() {
        console.log('style',style);
        let state = this.state;
        return (
            <div>
                <Layout {...state}>
                    <div className={style.home}>home <br/>use css module for Resolve scope conflicts</div>
                    <div className={style.test}>test</div>
                </Layout>

            </div>
        )
    }
}


export default Home;