react-JSX语法

JSX 语法

JSX - JS 语法扩展，可以在 JS 中写模板（类似 HTML 语法）

JSX 已经成为 ES 语法标准，也可用于其他框架，如 Vue3

• 标签
• 属性
• 事件
• JS 表达式
• 判断
• 循环

标签

• 首字母小写 - HTML tag
• 首字母大写 - 自定义组件
• 如 <input/> 和 <Input/> 就不一样

可以像 HTML 一样嵌套

JSX 里的标签必须是闭合的，<input> <br> 这样写在 JSX 会报错（在 HTML 中不会报错），必须闭合 <input/>

每一段 JSX 只能有一个根节点，或者使用 <></> （ Fragment ）

属性

和 HTML 属性基本一样，但有些和 JS 关键字冲突了

• class 要改为 className
• style 要写成 JS 对象（不能是 string），key 采用驼峰写法
• for 要改为 htmlFor

事件

onXxx 的形式

注意 TS 的写法

function clickHandler(event: React.MouseEvent<HTMLParagraphElement>) {
    event.preventDefault()
    console.log('clicked')
}

return <p onClick={clickHandler}>hello world</p>

如果要想传递参数，可以通过如下方式

  function clickHandler(event: React.MouseEvent<HTMLParagraphElement>, x: string) {
    event.preventDefault()
    console.log('clicked', x)
  }

  return (