typescript学习笔记(3)

ts在react中的应用

//声明一个组件
const Hello=(props:any)=>{return(<div>{props.message}</div>)}
 export default Hello

//App.js
function App() {
  return (
    <div className="App">
    <Hello message={"text"}></Hello>
    </div>
  );
}

//还可以这样

interface Text{
    names:string
}
 const Hello=(props:Text)=>{return(<div>{props.names}</div>)}
 export default Hello

function App() {
  return (
    <div className="App">
    <Hello names={"text"}></Hello>
    </div>
  );
}

//还可以这样
interface Text{
    names?:string
}

const Hello:React.FunctionComponent<Text>=(props)=>{
return(<div>{props.names}</div>)
}
Hello.defaultProps={names:'组件'}
 export default Hello
//如果不传props,默认是显示‘组件’,因为设置了?为可选参数
//React.FunctionComponent还可以用React.FC替换

const Hello:React.FC<Text>=(props)=>{
return(<div>{props.names}</div>)
}

 

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 像素格子 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读