如何从 react-bootstrap typescript prop 中输入一个 prop

Question

我正在创建一个组件 CollapsableCard，我想在道具中传递 3 个字段，headerText、children 和 headerStyle。前两个我理解并且工作得很好，但是 headerStyle 让我陷入困境。

export interface CollapseCardOptions {
  headerText: string;
  children: ReactElement;
  headerStyle: ????;
}

export default function CollapsableCard(props: CollapseCardOptions) {
  return (
    <Card>
      <Card.Header as={props.headerStyle} className="ctnet-card-header">
        {props.headerText}
        <span className="float-right clickable" onClick={showHideCardBody}>
          <i className="fa fa-chevron-up"></i>
        </span>
      </Card.Header>
      <Card.Body className="card-body">{props.children}</Card.Body>
    </Card>
  );
}

我已经将 Bootstrap v5 上的类型追溯到它们的原始接口，但我无法破译它们。

Header: BsPrefixRefForwardingComponent<"div", import("./CardHeader").CardHeaderProps>

去

export interface CardHeaderProps extends BsPrefixProps, React.HTMLAttributes<HTMLElement> {}

去

export interface BsPrefixProps<As extends React.ElementType = React.ElementType> extends BsPrefixOnlyProps, AsProp<As> {}

去

export interface AsProp<As extends React.ElementType = React.ElementType> {
    as?: As;
}

但是 As 没有定义，我无法将其导入我的 collapsableCard.tsx。

一些见解将不胜感激。

Answer 1

这是 Bootstrap Header{as} 的正确输入 React.ElementType<any> | undefined;

完成后的界面是这样的

export interface CollapseCardOptions {
  headerText: string;
  children: ReactElement;
  headerStyle: React.ElementType<any> | undefined;
}

如何从 react-bootstrap typescript prop 中输入一个 prop

how to type a prop from react-bootstrap typescript prop

typescript

react-bootstrap