Question

我正在使用
react-pagination（节点程序包）

所以我安装了@types/react-pagination

我为ReactPaginate创建了自定义组件

ReactPaginate有很多道具。
所以我创建了...props 该物件包含ReactPaginate's个道具。

@types/react-pagination具有接口ReactPaginateProps

所以我尝试了

interface IProps {
  onPageChange?():any;
  props: ReactPaginateProps; // ❓❓❓
}


const MYPagination: React.SFC<IProps> = ({
  onPageChange, ...props
}) => {
<ReactPaginate {...props}/>
}

我希望如果...prop包含（ReactPaginateProps）之一，然后输入确定！

请教我如何创建...pros's界面？

和react-pagination的props接口是

export interface ReactPaginateProps {
    /**
     * The total number of pages.
     */
    pageCount: number;

    /**
     * The range of pages displayed.
     */
    pageRangeDisplayed: number;

    /**
     * The number of pages to display for margins.
     */
    marginPagesDisplayed: number;

    /**
     * Label for the `previous` button.
     */
    previousLabel?: React.ReactNode;

    /**
     * Label for the `next` button.
     */
    nextLabel?: React.ReactNode;

    /**
     * Label for ellipsis.
     */
    breakLabel?: string | React.ReactNode;

    /**
     * The classname on tag `li` of the ellipsis element.
     */
    breakClassName?: string;

    /**
     * The classname on tag `a` of the ellipsis element.
     */
    breakLinkClassName?: string;

    /**
     * The method to call when a page is clicked. Exposes the current page object as an argument.
     */
    onPageChange?(selectedItem: { selected: number }): void;

    /**
     * The initial page selected.
     */
    initialPage?: number;

    /**
     * To override selected page with parent prop.
     */
    forcePage?: number;

    /**
     * Disable onPageChange callback with initial page. Default: false
     */
    disableInitialCallback?: boolean;

    /**
     * The classname of the pagination container.
     */
    containerClassName?: string;

    /**
     * The classname on tag `li` of each page element.
     */
    pageClassName?: string;

    /**
     * The classname on tag `a` of each page element.
     */
    pageLinkClassName?: string;

    /**
     * The classname for the active page.
     */
    activeClassName?: string;

    /**
     * The classname for the active link.
     */
    activeLinkClassName?: string;

    /**
     * The classname on tag `li` of the `previous` button.
     */
    previousClassName?: string;

    /**
     * The classname on tag `li` of the `next` button.
     */
    nextClassName?: string;

    /**
     * The classname on tag `a` of the `previous` button.
     */
    previousLinkClassName?: string;

    /**
     * The classname on tag `a` of the `next` button.
     */
    nextLinkClassName?: string;

    /**
     * The classname for disabled `previous` and `next` buttons.
     */
    disabledClassName?: string;

    /**
     * The method is called to generate the href attribute value on tag a of each page element.
     */
    hrefBuilder?(pageIndex: number): void;

    /**
     * Extra context to add to the aria-label HTML attribute.
     */
    extraAriaContext?: string;
}

Answer 1

interface IProps extends ReactPaginateProps {
  onPageChange?: () => any;
}

typescirpt我如何定义... props接口？

1 个答案: