分类导航

程序问答发布时间：2022-06-01 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Reacjs / TypeScript：自定义 HTMLATTRIBUTES => 声明为 INT 但在 DOM 中显示为“STRING”，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决Reacjs / TypeScript：自定义 HTMLATTRIBUTES => 声明为 INT 但在 DOM 中显示为“StriNG”？

开发过程中遇到Reacjs / TypeScript：自定义 HTMLATTRIBUTES => 声明为 INT 但在 DOM 中显示为“StriNG”的问题如何解决？下面主要结合日常开发的经验，给出你关于Reacjs / TypeScript：自定义 HTMLATTRIBUTES => 声明为 INT 但在 DOM 中显示为“StriNG”的解决方法建议，希望对你解决Reacjs / TypeScript：自定义 HTMLATTRIBUTES => 声明为 INT 但在 DOM 中显示为“StriNG”有所启发或帮助；

抱歉我的英语不好。

我正在尝试在 ReactJs + Typesctript 中构建一个应用程序......它完全是地狱。

在组件 TABS 中，我声明了 2 个海关 HTMLATTRIBUTES :

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes,DOMAttributes<T> {
    **playerID?: number;**
    component?: String;
  }
};

Tabs 组件的使用逻辑如下：

  <Tabs>   
      {
          tabList.map(tab => (
              <Tab 
                  component={tab.component} 
                  **playerID={player.ID}**
                  key={tab.ID}
                  title={tab.label}
                  icon={tab.icon}
                  name={tab.namE}
                  SELEcted>

              </Tab>
          )) 
      }       
  </Tabs>

组件声明了这些参数：

type Params = {
    title: String;
    children: React.ReactNode;
    icon: String;
    SELEcted?: Boolean;
    name:string;
    **playerID:number;**
    component:string;
}

最后我在

中渲染

 childrenArray.map(child => (
                        
      React.isValIDElement(child) ? 
          <li 
              component={Child.props.component}
              playerID= {number(child.props.playerID)}
              classname={`${Child.props.namE} ${((child.props.name === taBACtivE) && "is-active")?"is-active":""}`} 
              onClick = { (e: React.MouseEvent) => ChangeActiveTab(E)} 
              key={Child.key}>    
              
              <a>
                <span classname="icon is-small"><i classname={`fa ${Child.props.icon}`}></i></span>
                <span>{Child.props.titlE}</span>
              </a>
          </li> : 0
  ))

当我在 Chrone Inspector 上检查代码 HTML 时：

<ul>
    <li component="biography" **playerID="1"** class="tabBio is-active">
      <a>
        <span class="icon is-small"><i class="fa fa-book"></i></span>
        <span>BiographIE</span>
      </a>
    </li>
</ul>

PLAYERID 是一个字符串！为什么？我该如何解决？

感谢您的帮助，我希望我足够清楚。

解决方法

所有 HTML 属性都包含在引号 " 中，包括 height 和 width 等数值。这意味着 HTML 代码中的 number 和 String 之间没有区别。如果您想从 e.currentTarget 中提取值，您必须自己使用 number 将其转换为 parseInt。