深入 JSX
概述
- jsx 本质是React.createElement(component, props, …children)的语法糖
- component 指定 React 元素的类型
- React 必须在作用域内
- 在 JSX 类型中可以使用点语法
- 不能将通用表达式作为 React 元素类型
- js表达式可以作为props传递给 jsx
- Props 默认值为 “True”
- 布尔类型、Null 以及 Undefined 不会被渲染
React.createElement(component, props, …children)语法糖
<MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>
//会编译为:
React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)
//如果没有子节点,你还可以使用自闭合的标签形式,如:
<div className="sidebar" />
//会编译为:
React.createElement(
'div',
{className: 'sidebar'}
)
指定 React 元素类型
- JSX 标签的第一部分指定了 React 元素的类型,大写字母开头的 JSX 标签意味着它们是 React 组件
React 必须在作用域内
- 由于 JSX 会编译为 React.createElement 调用形式,所以 React 库也必须包含在 JSX 代码作用域内
import React from 'react';
import CustomButton from './CustomButton';
function WarningButton() {
// return React.createElement(CustomButton, {color: 'red'}, null);
return <CustomButton color="red" />;
}
在 JSX 类型中使用点语法
- 以使用点语法来引用一个 React 组件
- 你在一个模块中导出许多 React 组件时,这会非常方便哦
const MyComponents = {
DatePicker: function DatePicker(props){
return <div>Imagine a {props.color} datepicker here.</div>
}
}
function BlueDatePicker() {
return <MyComponents.DatePicker color="blue" />
}
用户定义的组件必须以大写字母开头
- 以小写字母开头的元素代表一个 HTML 内置组件
- 如 div 标签 会编译为 React.createElement(div)
- 大写字母开头的元素则对应着在 JavaScript 引入或自定义的组件
- 如 Foo 标签 会编译为 React.createElement(Foo)
在运行时选择类型
- 不能将通用表达式作为 React 元素类型,如果想通过通用表达式来动态决定元素类型,需要首先将它赋值给大写字母开头的变量。
import { PhotoStory, VideoStory } from './stories';
const components = {
photo: PhotoStory,
video: VideoStory
};
//错误写法:
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} />;
}
JavaScript 表达式作为 Props
- 可以把包裹在 {} 中的 JavaScript 表达式作为一个 prop 传递给 JSX 元素
<MyComponent foo={1 + 2 + 3 + 4} />
- if 语句以及 for 循环不是 JavaScript 表达式,所以不能在 JSX 中直接使用,但可以用在 JSX 以外的代码中
function NumberDescriber(props) {
let description;
if (props.number % 2 == 0) {
description = <strong>even</strong>;
} else {
description = <i>odd</i>;
}
return <div>{props.number} is an {description} number</div>;
}
字符串字面量
//等价
<MyComponent message="hello world" />
<MyComponent message={'hello world'} />
- 将字符串字面量赋值给 prop 时,它的值是未转义的
//等价
<MyComponent message="<3" />
<MyComponent message={'<3'} />
Props 默认值为 “True”
//等价
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />
展开属性
- 可以使用展开运算符 … 来在 JSX 中传递整个 props 对象
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}
JSX子元素
<MyComponent>Hello world!</MyComponent>
<MyContainer>
<MyFirstComponent />
<MySecondComponent />
</MyContainer>
- JavaScript 表达式作为子元素,使用 {} 包裹
//等价
<MyComponent>foo</MyComponent>
<MyComponent>{'foo'}</MyComponent>
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>
);
}
// 调用子元素回调 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 理解的对象。这种用法并不常见,但可以用于扩展 JSX。
- 布尔类型、Null 以及 Undefined 将会忽略,不会被渲染。如果你想渲染 false、true、null、undefined 等值,需要先将它们转换为字符串:
<div>
My JavaScript variable is {String(myVariable)}.
</div>