JSX in Depth
https://babeljs.io/ JS编译器,学习react和JS直接的转换。
JSX仅支持句法糖syntactic sugar:
React.createElement(component, props, ...children)函数,
JSX code:
<MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>
编译compiles into:
React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)
也可以使用self_closing form of the tag if there are no children. So:
<div className="sidebar" />
compiles into:
React.createElement(
'div',
{className: 'sidebar'},
null
)
函数形式的：
function hello() {
return <div>Hello world!</div>;
}
转换为：
function hello() {
return React.createElement(
'div',
null,
'Hello world!'
);
}
关于React元素的格式：
React 一定在Scope内。
使用. Dot Notaiton ,可以在JSX中使用点符号。如果一个模块要调出一些React组件，这样就方便了。例子：
import React from 'react';
const MyComponents = {
DatePicker: function DatePicker(props) {
return <div>Imagine a {props.color} datepicker here.</div>;
}
}
function BlueDatePicker() {
return <
MyComponents.DatePicker
color="blue" />;
}
自定义的组件必须首字母大写(除非分配它一个首字母大写的变量)。function Hello(props){...}
在运行时选择类型Choosing the type at runtime
不能把表达式用做React element type。但是可以把它分配给一个大写字母的变量，然后就可以间接用JSX格式了
import React from 'react';
import { PhotoStory, VideoStory } from './stories';
const components = {
photo: PhotoStory,
video: VideoStory
};
function Story(props) {
// Wrong! JSX type can't be an expression.
return
<components[props.storyType] story={props.story} />;
}
function Story(props) {
// Correct! JSX type can be a capitalized variable.
const SpecificStory = components[props.storyType];
return <SpecificStory story={props.story} />;
}
Props in JSX
通过{}, 任何JS expression 都可以作为props. 例如<MyComponent foo={1 + 2 + 3 + 4} />
if statements and for loops 不是JS表达式，不能直接用于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>;
}
条件判断 Inline的写法：
{true && expression} //如果是true,则执行表达式。
{condition ? true : false }
防止组件被渲染：
return null; ⚠️，组件的lifecycle 方法钩子方法，仍然生效componentWillUpdate 和 componentDidUpdate。
Children in JSX
string Literals
<div>This is valid HTML & JSX at the same time.</div>
& 就是&
编译：
React.createElement(
"div",
null,
"This is valid HTML & JSX at the same time."
);
JSX移除一行开头和结尾的空格
JSX Children
支持内嵌JSX元素作为孩子。在嵌套组件中很有用。
React组件也返回数组元素。return [, ,];
JS expression也可以作为孩子。
function Item(props) {
return <li>hello,
{props.message}
</li>;
//props.children
}
function TodoList() {
const todos = ['finish', 'submit ', 'review'];
return (
<ul>
//这个是函数作为props.children。
{todos.map(message =>
<Item key={message} message={message} />
)}
</ul>
);
}
Function as Children
见标黄的代码.React.createElement(component, props,...child)
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}>{index}:This is item {index}</div>}
</Repeat>
);
}
Booleans, Null, and Undefined are Ignored.
false ,null, undefined, true都是验证的孩子，不过它们不渲染。
所以可以作为条件判断 condition && expression。
如果showHeader是true则渲染<Header />
<div>
{showHeader && <Header />}
<Content />
</div>
⚠️ 0会被渲染
如果要让true渲染使用类型转换,String()。
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>;
}
z