【学习笔记】JSX语法（.tsx） - 一个 JavaScript 的语法扩展

JSX 是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签。

React + JSX

React 不强制要求使用 JSX，但在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。

一、JSX 简介

在 React 中，渲染逻辑和标签共同存在于同一个地方——组件。每个 React 组件都是一个 JavaScript 函数，它会返回一些标签渲染到浏览器上，使用 JSX 的语法扩展来描述这些标签。

// 声明变量
const element = <h1>Hello, world!</h1>;

// 使用 {/*  */} 进行注释
{/* const element = <h1>Hello, world!</h1>; */}

// 在组件中描述标签
export default function Bio() {
  return (
    <div>
      <div className="intro">
        <h1>欢迎来到我的站点！</h1>
      </div>
      <p className="summary">
        你可以在这里了解我的想法。
        <br /><br />
        <b>还有科学家们的<i>照片</i></b>！
      </p>
    </div>
  );
}

1、JSX 规则

• 只能返回一个根元素

// 如果想要在一个组件中包含多个元素，需要用一个父标签把它们包裹起来（可以用空标签代替）
<div>
  <h1>海蒂·拉玛的待办事项</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

• 标签必须闭合

// JSX 要求标签必须正确闭合（像 <img> 这样的自闭合标签必须书写成 <img />）
<>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
   />
  <ul>
      <li>发明一种新式交通信号灯</li>
      <li>排练一个电影场景</li>
      <li>改进频谱技术</li>
  </ul>
</>

• 使用驼峰式命名法给大部分属性命名！

// 在 React 中，大部分 HTML 和 SVG 属性都用驼峰式命名法表示（不能包含 - 符号或 class 这样的保留字）
<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  className="photo"
/>

2、在 JSX 中嵌入表达式

在 JSX 中，只能在以下两种场景中使用大括号{}：

• 用作 JSX 标签内的文本：<h1>{name}'s To Do List</h1> 是有效的，但是 <{tag}>Gregorio Y. Zara's To Do List</{tag}> 无效
• 用作紧跟在 = 符号后的属性：src={avatar} 会读取 avatar 变量，但是 src="{avatar}" 只会传一个字符串 {avatar}

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}
const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

// 调用函数结果并嵌入
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

// 在代码块中使用 JSX：将 JSX 赋值给变量、把 JSX 当作参数传入、从函数中返回 JSX
function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

为了便于阅读，建议将 JSX 拆分为多行，并包裹在()中，这样可以避免遇到自动插入分号陷阱。

3、JSX 中指定属性

const element = <a href="https://www.legacy.reactjs.org"> link </a>;

// 在属性值中插入一个 JavaScript 表达式
const element = <img src={user.avatarUrl}></img>;

// 给 style 属性传递一个对象（对象用{}表示，再将对象包裹到{}中，看起来像{{}}）
export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

你应该仅使用""（对于字符串值）或{}（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。
因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以应使用 camelCase 来定义属性的名称。

4、使用 JSX 指定子元素

// 若标签里面没有内容，可以使用 /> 来闭合标签
const element = <img src={user.avatarUrl} />;

// 可以包含很多子元素
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX 防止注入攻击：直接插入用户输入内容是安全的

5、JSX 表示对象

// Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
// 等价于：
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

二、深入 JSX

1、指定 React 元素类型

大写字母开头的 JSX 标签意味着它们是 React 组件，必须包含在作用域内。

• React 库必须包含在 JSX 代码作用域内

// 虽然 React 和 CustomButton 并没有被直接使用，但还是需要导入
import React from 'react';
import CustomButton from './CustomButton';

function WarningButton() {
  // return React.createElement(CustomButton, {color: 'red'}, null);
  return <CustomButton color="red" />;
}

如果你是直接通过 script 标签加载 React，则必须将 React 挂载到全局变量中

• 在 JSX 类型中使用点语法引用 React 组件

import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}
// 当你在一个模块导出许多 React 组件时，例如 MyComponents.DatePicker，可以在 JSX 中直接引用
function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

• 用户定义的组件必须以大写字母开头

import React from 'react';

// 错误！组件应该以大写字母开头 function Hello(props) {}
function hello(props) {
  // 正确！这种 <div> 的使用是合法的，因为 div 是一个有效的 HTML 标签
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // 错误！React 会认为 <hello /> 是一个 HTML 标签，因为它没有以大写字母开头 <Hello toWhat="World" />
  return <hello toWhat="World" />;
}

• 在运行时选择类型

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

// 如果你想通过通用表达式来（动态）决定元素类型（根据 prop 来渲染不同组件）
function Story(props) {
  // 错误！JSX 类型不能是一个表达式。
  return <components[props.storyType] story={props.story} />;
}

// 需要首先将类型赋值给一个大写字母开头的变量
function Story(props) {
  // 正确！JSX 类型可以是大写字母开头的变量。
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

2、JSX 中的 Props

• JavaScript 表达式作为 Props

// 把包裹在 {} 中的 JavaScript 表达式作为一个 prop 传递给 JSX 元素
<MyComponent foo={1 + 2 + 3 + 4} />

• 字符串字面量

// 将字符串字面量赋值给 prop
<MyComponent message="hello world" />
<MyComponent message={'hello world'} />

// 值是未转义的
<MyComponent message="&lt;3" />
<MyComponent message={'<3'} />

• Props 默认值为 “True”

// 没赋值时 prop 的默认值是 true
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />

建议给 prop 赋值，以免与 ES6 对象简写混淆

• 属性展开

// 使用展开运算符 ... 在 JSX 中传递已有的 props 对象
function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

// 只保留当前组件需要的 props，并使用 ... 将其他 props 传递下去
const Button = props => {
  const { kind, ...other } = props;
  const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
  return <button className={className} {...other} />;
};
const App = () => {
  return (
    <div>
      <Button kind="primary" onClick={() => console.log("clicked!")}>
        Hello World!
      </Button>
    </div>
  );
};

谨慎使用该语法：属性展开在某些情况下很有用，但是也很容易将不必要的 props 传递给不相关的组件，或者将无效的 HTML 属性传递给 DOM。

3、JSX 中的子元素

包含在开始和结束标签之间的 JSX 表达式内容将作为特定属性 props.children 传递给外层组件。

• 字符串字面量

<MyComponent>Hello world!</MyComponent>
<div>可以采用编写 HTML 的方式来编写 JSX</div>

<!-- JSX 会自动移除行首尾的空格以及空行，文本字符串之间的新行会被压缩为一个空格。 -->
<div>
  Hello World
</div>

<div>
  Hello
  World
</div>

<div>

  Hello World
</div>

• JSX 子元素

<!-- 子元素允许由多个 JSX 元素组成（嵌套组件） -->
<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

// React 组件也能够返回存储在数组中的一组元素
render() {
  // 不需要用额外的元素包裹列表元素！
  return [
    // 不要忘记设置 key :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

• JavaScript 表达式作为子元素

// JavaScript 表达式可以被包裹在 {} 中作为子元素
<MyComponent>foo</MyComponent>
<MyComponent>{'foo'}</MyComponent>

// 渲染 HTML 列表
function Item(props) {
  return <li>{props.message}</li>;
}
function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

// JavaScript 表达式和其他类型的子元素组合，可以替代模板字符串
function Hello(props) {
  return <div>Hello {props.addressee}!</div>;
}

• 函数作为子元素

// 调用子元素回调 numTimes 次，来重复生成组件
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

你可以将任何东西作为子元素传递给自定义组件，只要确保在该组件渲染之前能够被转换成 React 理解的对象

• 布尔类型、Null 以及 Undefined 将会忽略

// false, null, undefined, true 是合法的子元素，但它们并不会被渲染
<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>

// 如果你想渲染 false、true、null、undefined 等值，你需要先将它们转换为字符串
<div>
  My JavaScript variable is {String(myVariable)}.
</div>

// 仅当 showHeader 为 true 时，才会渲染 <Header /> 组件
<div>
  {showHeader && <Header />}
  <Content />
</div>

// 一些 “falsy” 值，如数字 0，仍然会被 React 渲染
<div>
  // 当 props.messages 是空数组时，将会渲染为数字 0
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>
// 要解决这个问题，确保 && 之前的表达式总是布尔值
<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>