JS解构时赋予别名

2021-06-04 15:35:58 阅读：182 来源： 互联网

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

标签：const,别名,JS,React,tag,组件,解构
来源： https://www.cnblogs.com/Andy1982/p/14849762.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JS解构时赋予别名