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="<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>