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>
)
}
}
}
React-简单的复合组件
猜你喜欢
转载自blog.csdn.net/qq_36162529/article/details/102670543
今日推荐
周排行