React+TS调用组件时报Type 'boolean'不可分配给number类型如何解决

你在App.tsx中给TextField组件传递age属性时，不符合JSX的语法规则：JSX 中只有字符串字面量可以直接用引号赋值，所有非字符串类型的值（数字、布尔、变量、表达式等）都必须用{}包裹。你写的age=12没有加花括号，TypeScript 会将其解析为布尔值true，和你在Props接口中定义的age: number类型不匹配，因此抛出类型错误。

直接修改App.tsx中调用TextField组件的代码，给数字12套上花括号即可：

// 修改前
<TextField name='fef' age=12/>
// 修改后
<TextField name='fef' age={12}/>

修正后的完整 App.tsx 代码 #

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import { TextField } from './components/TextField';

function App() {
  return (
    <div className="App">
      <TextField name='fef' age={12}/>
    </div>
  );
}

export default App;

• 所有非字符串类型的Props传值都需要用{}包裹，比如布尔值disabled={false}、变量age={userAge}、计算表达式age={2024 - birthYear}
• 字符串类型的属性也可以统一用{}包裹写法，比如name={'fef'}，和引号写法效果完全一致。

内容的提问来源于stack exchange，提问作者nimsara-c