React 组件prop添加类型

在这里插入图片描述

给函数的props做注解

import { useState } from 'react'

type Props ={ 
  className:string,
  title?:string
}
// 自定义一个Button组件 
function Button(props:Props){
  // 解构出classname\
  const {className} = props
  return <button className={className}>点击我</button>
}



function App() {
  
  type User ={
    name:String,
    age:number

  }
  // 限制初始值类型 

  const [user,setUser] = useState<User | null>(null)
  //  限制setUser()对象参数 
  const changeUser = ()=>{
    setUser({
      name:`bob`,
      age:55
    })
  }

  return <>this is a app
  <Button class='nick'></Button></>
  
}

export default App

限制Button自定义组件的接收值必须为两个string类型的变量

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

巴巴_羊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值