Reacjs / TypeScript：自定义 HTMLATTRIBUTES => 声明为 INT 但在 DOM 中显示为“STRING”

Question

sorry for my terrible English.

I am trying to build an app in ReactJS + Typesctript... and it is completly HELL.

In a component TABS , I declared 2 customs HTMLATTRIBUTES:

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

The Tabs component is used like this logic:

  <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>

The < Tab > Component has thoses params declared:

type Params = {
    title: string;
    children: React.ReactNode;
    icon: string;
    selected?: boolean;
    name:string;
    **playerid:number;**
    component:string;
}

And finally i render in the < Tabs >

 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
  ))

When i check the code HTML on Chrone Inspector:

<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 is a String? why? how can I fix it ?

Thanks for helping, I hope i was clear enought.

Answer 1

All HTML attributes are enclosed in quotes " , including numeric values like height and width . This means that there is no distinction between a number and a string in the HTML code. If you want to extract the value from an e.currentTarget , you have to cast it to a number yourself using parseInt .