React-简单的复合组件

import React from 'react';

function Card(props){
    return (
        <div className='card'>
            {props.children}
        </div>
    )
}

function FormButton(props){
    const {defaultBtns，btns} = props.children;
    return (
        <div className='form-button'>
            <button onClick={defaultBtns.searchClick}>
                查询
            </button>
            <button onClick={defaultBtns.resetClick}>
                重置
            </button>   
            {
                btns.map((item, index) => {
                    return (
                        <button key={index} onClick={item.onClick}>
                            {item.title}
                        </button>
                    )
                })
            } 
        </div>
    )
}

export default class CompositionPage extends Component{
    render() {
        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>
        )
    }
}
}