JS解構時賦予別名

JS解構的用法想必大家都知道，但解構時可以賦予別名大家就不一定都了解了。
起因：在公司項目中希望通過傳入的參數動態生成組件標簽。
解決方式：對入參解構，賦予別名，並使用別名作為組件標簽。

先解釋JS中解構的別名

const obj = { x: 1 };
//otherName為x的別名
const { x: otherName } = obj;

如何在React中使用解構動態生成組件，廢話不多說，直接上代碼：

import React from 'react';

type BaseProps = ({
    tag: 'div' | 'span' ;
  } | {
      tag: 'a';
      href: string
  }) & {
    size: 'lg' | 'sm';
  }

const InternalButton: React.ForwardRefRenderFunction<
    unknown,
    BaseProps & React.HTMLAttributes<HTMLOrSVGElement>
  > = ({
    tag: DynamicTag = "div",
    children,
    ...rest
  }, ref) => {
  const btnRef = (ref as any) || React.useRef();

    return <DynamicTag {...rest} ref={btnRef} >{children}</DynamicTag>;
  };

const DymanicButton = React.forwardRef<unknown, BaseProps>(InternalButton);
export default DymanicButton;

上述代碼中，DynamicTag作為tag的別名，在BaseProps中被限定為div, span或a。 運行時根據傳入的值生成組件實例。