当海风翻页时

TSX 是什么#

JSX 是 JavaScript 的语法扩展，允许在 JS 文件里写类 HTML 的标记（Writing Markup with JSX）。TSX 就是在 JSX 上加 TypeScript 的类型标注。

浏览器不认识尖括号，所以两者都要先编译成普通的 JavaScript 函数调用。编译这一步由 Babel 或 SWC 做，细节见下一篇。

官方在那一页特别说明：JSX 与 React 是两件独立的事。JSX 是语法扩展，React 是库；两者常一起用，也可以分开用。

三条硬规则#

返回单个根节点。不想多套一层 <div>，就用空标签 <> 与 </>。这个空标签叫 Fragment，它只做分组，不留在 HTML 树里。规则的原因很直白：JSX 最终变成 JavaScript 对象，一个函数不能返回两个对象。

标签必须闭合。<img> 要写成 <img />，<li>苹果 要写成 <li>苹果</li>。

属性名用驼峰。class 是 JavaScript 保留字，React 里写 className；stroke-width 写 strokeWidth。两个例外是 aria-* 与 data-*，保持原来的短横线。

属性写错不用死记，React 会在浏览器控制台给出可能的改正建议。

用 {} 嵌表达式#

{} 里可以放变量、运算、三元表达式、map() 的结果。它只接受表达式，不接受语句，所以条件分支要写在 return 之前。

这一点和 Vue 的模板差别明显：Vue 用 v-if、v-for 这类指令加 {{ }} 插值，React 的 {} 里就是普通 JavaScript。

给 props 标类型#

1
type MsgProps = {
2
  text: string
3
  count?: number
4
}
5

6
function Hello({ text, count = 1 }: MsgProps) {
7
  return (
8
    <div>
9
      <h1>{text}</h1>
10
      <p>数字：{count + 1}</p>
11
    </div>
12
  )
13
}
14

15
export default function App() {
16
  return <Hello text="Hello TSX" count={3} />
17
}

count?: number 表示这个 prop 可以不传，count = 1 给它一个默认值。传错类型时编译阶段就报错，不必等到运行。

四个常踩的坑#

内联样式是对象，所以要写两层花括号：style={{ color: 'red' }}。外层是表达式，内层是对象。

列表要给 key。它是 React 判断“哪一条还是原来那一条”的依据，用下标当 key 会在增删时出错。

注释写在 {/* … */} 里。直接写 // 会被当成要显示的文本。

{} 里的内容最终会转成字符串渲染。对象不能直接渲染，要取它的具体字段。