React基础之tsx语法

tsx在jsx的基础上添加了新的类型，除此之外没有任何区别

事件绑定

function

App

() {

const

handleClick

=()

=>

{

console

.

log

(

‘button

被点击了

'

);

}

return

(

<

div

className

=

“App”

<

button

onClick

=

{

handleClick

}

click me

</

button

</

div

)

}

export default

App

传递自定义参数

需要指定箭头函数的形式

function

App

() {

const

handleClick

=(

name

)

=>

{

console

.

log

(

‘button

被点击了

'

,

name

);

}

return

(

<

div

className

=

“App”

<

button

onClick

=

{

()

=>

handleClick

(

‘jack’

)

}

click me

</

button

</

div

)

}

export default

App

如果需要同时传递事件对象与自定义参数

需要在传递自定义参数的箭头函数的括号里面传递事件e

function

App

() {

const

handleClick

=(

name

,

e

)

=>

{

console

.

log

(

‘button

被点击了

'

,

name

,

e

);

}

return

(

<

div

className

=

“App”

<

button

onClick

=

{

(

e

)

=>

handleClick

(

‘jack’

,

e

)

}

click me

</

button

</

div

)

}

export default

App