八、组件复合

复合组件给与你⾜够的敏捷去定义⾃定义组件的外观和行为，这种方式更明确和安全。如果组件间有公用的非UI逻辑，将它们抽取为JS模块导⼊使⽤⽽不是继承它。

实现⼀个简单的复合组件，如Antd的Card

import React, { Component } from 'react'
function Card(props) {
    return <div className="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>
  )
}
function CompositionPage(props){
  return (
    <div>
      <Card>
        <p>我是内容</p>
      </Card>
      <Formbutton>
       {{defaultBtns: {
                    searchClick: () => console.log('默认查询'),
          resetClick: () => console.log('默认重置')}, 
          btns: [{title: '查询',onClick: () => console.log('查询')}, 
                 {title: '重置',onClick: () => console.log('重置')} 
                ]}
       }
      </Formbutton>
    </div>
  )
}