5、react卡槽

react分为聚名卡槽和匿名卡槽两种



import React,{Component} from 'react'
import Layout from './Layout'
import {Consumer} from '../Appcontent'

class Home extends Component{
    render(){
        return <Consumer>{ctx => <HomeHandle {...ctx}/>}</Consumer>
    }
}

export default Home;


聚名卡槽传递一个对象：
function HomeHandle(props){
    return(
        <Layout title='商城首页'>
                 {{
                    btn: <button>按钮</button>,
                    content:"我是内容"
                }}
        </Layout>
    )
}

匿名卡槽
// function HomeHandle(props){
//     return(
//         <Layout title='商城首页'>
//               <div>Home</div>
//         </Layout>
//     )
// }

Layout 文件

import React,{Component} from 'react'
import TabBar  from '../component/TabBar'

class Layout extends Component{
    render(){
        const {showTabBar=true, children} = this.props
        console.log('this.props', this.props)
       
        //兼容匿名聚名卡槽写法
        const a =[]
        if(children.$$typeof){//匿名卡槽chuldren携带有$$typeof，里面直接包含传递内容
            a.push(children)
        }else{
            for(let i in children){//聚名卡槽children则携带命名的对象名
                a.push(children[i])
            }
        }
        return (
            <div>
                {/* {children.btn}
                {children.content} */}
                {
                    a.map((itme,index)=>{
                        return <div key={`chuldren${index}`}>{itme}</div>
                    })
                }
                {showTabBar && <TabBar />}
            </div>
        )
    }
    componentDidMount(){
        const {title='商城'} = this.props
        document.title = title
    }
}

export default Layout;



Layout文件中引入的TabBar文件：

import React,{Component} from 'react';
import {Consumer} from '../Appcontent'
class TabBar extends Component{
    render(){
        return(
            <Consumer>{ctx => <TabBarHandle {...ctx}/>}</Consumer>
        )
    }
}

export default TabBar;

function TabBarHandle(props){
    return <div className='TabBar'>TabBarHandle</div>
}