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。 运行时根据传入的值生成组件实例。