- 在父組件中給子組件傳參
在父組件中引入子組件，然后直接傳入?yún)?shù)休讳，子組件通過React.Component<Iprops>讲婚，它里面的第一個(gè)泛型參數(shù)就是你父組件傳來(lái)的參數(shù)
- App.tsx
import React, { Component } from 'react';
import Button from './componets/button'
class App extends Component {
render() {
return (
<div className="App">
<Button>小改改</Button>
</div>
)
}
}
- button.tsx
import React from 'react'
import './button.css'
interface Iprops {
size: string
}
class Button extends React.Component<Iprops>{
render() {
return (
<div className="button">{this.props.children}</div>
)
}
}
export default Button
- 設(shè)置組件里的私有屬性
組件中的私有屬性就是React.Component<>里面的第二個(gè)參數(shù)
interface IState {
n: number
}
class Button extends React.Component<Iprops, IState>{
constructor(props: Iprops) {
super(props)
this.state = {
n: 1
}
}
render() {
return (
<div className="button">
{this.state.n}
</div>
)
}
}
- 修改react開發(fā)者工具里組件的名字
我們現(xiàn)在的組件名字是Button，如果我們想修改它只需要在對(duì)應(yīng)組件中修改它靜態(tài)資源的displayName
class Button extends React.Component<Iprops, IState>{
static displayName = 'LifaButton'
}
- 設(shè)置組件的props的默認(rèn)值
當(dāng)我們沒有在父組件中傳給子組件props時(shí)俊柔，我們可以在子組件中通過defaultProps來(lái)設(shè)置它的默認(rèn)值
class Button extends React.Component<Iprops, IState>{
static defaultProps = {
size: 'normal'
}
}
問題：在我們不傳的時(shí)候筹麸，我們?cè)O(shè)置默認(rèn)值，可能在使用的時(shí)候會(huì)報(bào)錯(cuò)雏婶，比如
它會(huì)報(bào)size有可能是undefined物赶，解決方法強(qiáng)制指定類型為string
this.props.size as string + 1
- 觸發(fā)父組件中的點(diǎn)擊事件
(1). 在子組件中的props對(duì)應(yīng)的接口里定義onClick類型為React.MouseEventHandler
(2). 父組件中傳入onClick，并聲明對(duì)應(yīng)的onClick事件留晚，事件里的event類型指定為React.MouseEvent
(3). 子組件里的onClick調(diào)用父組件傳來(lái)的onClick
- App.tsx
class App extends Component {
onClick(e: React.MouseEvent) {
console.log(e)
}
render() {
return (
<div className="App">
<Button onClick={this.onClick}>哈哈哈小改改</Button>
</div>
)
}
}
- button.tsx
interface Iprops {
onClick: React.MouseEventHandler
}
class Button extends React.Component<Iprops> {
render(
<div className="button" onClick={this.props.onClick}></div>
)
}
問題：
上面的e: React.MouseEvent酵紫，我們直接打印出e.target是當(dāng)前的div標(biāo)簽，div可以設(shè)置style错维，所以我們嘗試打印出e.target.style憨闰，但是我們發(fā)現(xiàn)會(huì)報(bào)錯(cuò)，因?yàn)樗J(rèn)為e.target有可能是undefined需五。
解決辦法：
- 指定
e.target類型為HTMLDIVElement
e.target as HTMLDivElement).style
- 直接為e指定
React.MouseEvent<HTMLDivElement>
onClick(e: React.MouseEvent<HTMLDivElement>) {
const div = e.currentTarget
console.log(div.style.width)
}
- this問題鹉动，react里默認(rèn)this是undefined，如果需要對(duì)屬性進(jìn)行操作宏邮，需要使用箭頭函數(shù)泽示，或者綁定它的this
寫法1：
class Button extends React.Component<Iprops, IState>{
static displayName = 'LifaButton'
static defaultProps = {
size: 'normal'
}
constructor(props: Iprops) {
super(props)
this.state = {
n: 1
}
}
// 使用箭頭函數(shù)讓this等于外界的this
onClick= ()=> {
this.setState({
n: this.state.n + 1
})
}
render() {
return (
<div className="button" onClick={this.onClick}>
{this.props.children}
{this.state.n}
</div>
)
}
}
寫法2：
onClick(){
this.setState({
n: this.state.n + 1
})
}
render() {
return (
<div className="button" onClick={this.onClick.bind(this)}>
{this.props.children}
{this.state.n}
</div>
)
}
總結(jié)：
- React.Compoent<>里的第一個(gè)參數(shù)是props的類型缸血，第二個(gè)是state的類型
- 如果需要綁定click事件，你需要聲明onClick類型為React.Mouse(事件類型)EventHandler
- onClick兩種寫法：
(1). 舊語(yǔ)法加bind this.onClick.bind(this)
(2). 直接箭頭函數(shù)
