JSX 语法
JSX - JS 语法扩展,可以在 JS 中写模板(类似 HTML 语法) JSX 已经成为 ES 语法标准,也可用于其他框架,如 Vue3
1. 标签
2. 属性
3. 事件
4. JS 表达式
5. 判断
6. 循环
标签
1. 首字母小写 - HTML tag
2. 首字母**大写** - 自定义组件
3. 如 <input/> 和 <Input/>就不一样
可以像 HTML 一样嵌套
JSX 里的标签必须是闭合的,<input> <br> 这样写在 JSX 会报错(在 HTML 中不会报错),必须闭合 <input/>
每一段 JSX 只能有一个根节点,或者使用 `<></>` ( Fragment )
属性
和 HTML 属性基本一样,但有些和 JS 关键字冲突了
1. `class` 要改为 `className`
2. `style` 要写成 JS 对象(不能是 string),key 采用**驼峰写法**
3. `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 (
<p onClick={(e: React.MouseEvent<HTMLParagraphElement>) => clickHandler(e, 'hello')}>
hello world
</p>
)
PS:Event handlers must be passed, not called! onClick={handleClick}
, not onClick={handleClick()}
.
JS 表达式
{xxx}
格式表示一个 JS 变量或表达式,可用于
- 普通文本内容,或判断、循环
- 属性值
- 用于注释
判断
JS 一般使用 if...else
做判断,但不能用于 JSX 的 {xxx}
中。
所以,可以选择其他方式做判断
- 运算符
&&
- 三元表达式
a ? b : c
- 用函数封装
const flag = true
return <div>
{flag && <p>hello</p>}
{flag ? <p>你好</p> : <p>再见</p>}
</div>
或者用函数封装
function Hello() {
if (flag) return <p>你好</p>
else return <p>再见</p>
}
return <Hello></Hello>
循环
使用 map
做循环
const list = [
{ username: 'zhangsan', name: '张三' },
{ username: 'lisi', name: '李四' },
{ username: 'Amorous', name: 'amorous' },
]
const ul = <ul>
{list.map(user => {
return <li key={user.username}>{user.name}</li>
})}
</ul>
JSX 循环必须有 key
- 帮助 React 识别哪些元素改变了,比如被添加或删除。
- 同级别
key
必须唯一 key
是不可改变的 —— 尽量不用 index ,要用业务 ID (也不要用随机数)key
用于优化 VDOM diff 算法