React声明组件与三种this绑定方式

发表于 |

声明组件的两种方式

1、组件式声明

1
2
3
4
5
6
7
8
9
10
11
12
class App extends React.Component{
    render(){
        const boss='李云龙'
        return (
            <div>
                <h2>独立团{boss}</h2>
                <One boss='张大苗'/>
                <Two boss='张晓喵'></Two>
            </div>
        )
    }
}

2、函数式组件

1
2
3
function Two(props) {
      return <h2>骑兵连连长{props.boss}</h2>
}

方法绑定的三种方式

1、在构造函数中绑定

1
2
3
4
5
6
7
8
9
10
class One extends  React.Component{
    constructor(props){
        super(props)
        this.state = {
            ...
        }
        //第一种绑定方式
        this.addSolder = this.addSolder.bind(this)
    }
}

2、用箭头函数绑定

1
2
3
addSolder = () => {
    ...
}

调用方法<Button onClick = { this.addSolder }>新兵入伍</Button>

3、第三种绑定方式

1
<button onClick={() => this.addSolder()}>新兵入伍</button>