index.tsx

import React, { PureComponent, createElement } from 'react';
import PropTypes, { string } from 'prop-types';
import { Button } from 'antd';
import styles from './index.less';

export interface EditableLink {
  title: string;
  href: string;
}

interface EditableLinkGroupProps {
  onAdd: () => void;
  links: EditableLink[];
  linkElement: React.Component;
}

class EditableLinkGroup extends PureComponent<EditableLinkGroupProps> {
  static propTypes = {
    links: PropTypes.array,
    onAdd: PropTypes.func,
    linkElement: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  };

  static defaultProps = {
    links: [],
    onAdd: () => {},
    linkElement: 'a',
  };

  render() {
    const { links, linkElement, onAdd } = this.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} icon="plus">
            添加
          </Button>
        }
      </div>
    );
  }
}

export default EditableLinkGroup;