react基础知识-6.组件复合

复合组件给你足够的敏捷去自定义组件的外观和行为,这种方式更明确和安全。如果组件中有公用的非ui逻辑,将他们抽取为js模块导入而不是继承它们

6.1不具名组件

import React,{Component} from "react";

export default class BottomBar extends Component{
  render(){
    return(
      <div className = "bottomBar">
        <h3>BottomBar</h3>
      </div>
    )
  }
}

import React,{Component} from "react";

export default class TopBar extends Component{
  render(){
    return(
      <div className = "topBar">
        <h3>TopBar</h3>
      </div>
    )
  }
}

import React,{Component, component} from "react";
import TopBar from '../components/TopBar'
import BottomBar from '../components/BottomBar'

export default class Layout extends Component{
  componentDidMount(){
    const {title="商城"} = this.props
    document.title = title
  }
  render(){
    const {children,showTopBar,showBottomBar} = this.props;
    console.log("children",children);
    return(
      <div>
        {showBottomBar&&<TopBar/>}
        {children.content}
        {children.txt}
        <button onClick = {children.btnClick}>button</button>
        {showBottomBar&&<BottomBar/>}
      </div>
    )
  }
}

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

export default class UserPage extends Component{
  render(){
    return(
      <Layout showTopBar = {true} showBottomBar = {true} title="用户中心">
        <div>
          <h3>UserPage</h3>
        </div>
      </Layout>
    )
  }
}

6.2具名组件

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

export default class UserPage extends Component{
  render(){
    return(
      <Layout showTopBar = {true} showBottomBar = {true} title="用户中心">
        {{
          content:(
            <div>
              <h3>HomePage</h3>
            </div>
          ),
          txt:"这是一个文本",
          btnClick:()=>{
            console.log("btnClick")
          }
        }}
      </Layout>
    )
  }
}

6.3复合组件

import React,{Component} from 'react'
function Card(props){
  return (
    <div xu = "card">
      {
        props.children
      }
    </div>
  )
}

function FormButton(props){
  return (
    <div className="Formbutton">
      <button onClick = {props.children.defaultBtns.searchClick}>默认查询</button>
      <button onClick = {props.children.defaultBtns.resetClick}>默认重置</button>
      {
        props.children.btns.map((item,index)=>{
          return (
            <button key={'btn'+index} onClick={item.onClick}>
              {item.title}
            </button>)
        })
      }
    </div>
  )
}

export default class CompositionPage extends Component{
  render(){
    return(
      <div>
        <Card>
          <p>我是内容</p>  
        </Card>
        CompositionPage
        <Card>
          <p>我是内容2</p>  
        </Card>
        <FormButton>
          {{
            defaultBtns:{
              searchClick:() => console.log("默认查询"),
              resetClick:() => console.log("默认重置")
            },
            btns:[
              {
                title:'查询',
                onClick:() => console.log('查询')
              },{
                title:'重置',
                onClick:() => console.log('重置')
              }
            ]
          }}
        </FormButton>  
      </div>
    )
  }
}

代码下载地址:https://gitee.com/JingYaBei/my-app.git