import React , { createElement } from 'react' ; import { PlusOutlined } from '@ant-design/icons' ; import { Button } from 'antd' ; import styles from './index.less' ; export type EditableLink = { title : string ; href : string ; id ? : string ; } ; type EditableLinkGroupProps = { onAdd : ( ) => void ; links : EditableLink [ ] ; linkElement : any ; } ; const EditableLinkGroup = ( props ) => { const { links , linkElement , onAdd } = props ; return ( < div className = { styles . linkGroup } > { links . map ( ( link ) => createElement ( linkElement , { key : `linkGroup-item-${ link . id || link . title }` , to : link . href , href : link . href , } , link . title ) ) } < Button size = "small" type = "primary" ghost onClick = { onAdd } > < PlusOutlined /> 添加 < /Button> < /div>); } ; EditableLinkGroup . defaultProps = { links : [ ] , onAdd : ( ) => { } , linkElement : 'a' , } ; export default EditableLinkGroup ;