1、JX实际上是React.createElement(component,props,...children)的语法糖
2、JSX判断是否为react组件的依据是标签首字母为大写(所以要求用户自定义的组件必须首字母大写)
3、JSX编译需要使用React.createElement方法和被编译的组件,所以在该作用域中需要存在React和组件对象,若不存在直接导入
4、可以使用 . 这个符号来获取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" />;
}
5、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} />;
} import React from 'react';
import { PhotoStory, VideoStory } from './stories'; const components = {
photo: PhotoStory,
video: VideoStory
}; function Story(props) {
// Correct! JSX type can be a capitalized variable.
const SpecificStory = components[props.storyType];
return <SpecificStory story={props.story} />;
}
6、JSX中的某个属性会为{}中的计算结果值
7、如果JSX中的某个组件设立了属性但是没赋值,该属性的默认值为true
8、传播属性(这一部分不是很理解,感觉没什么实质上的作用)
9、JSX包含的内容
(1)字符串
jsx会省略内部字符串首尾空白,若字符串出现换行,则通过一个空白来链接两行内容
(2)JSX元素
也可以包含一个数组
render() {
// No need to wrap list items in an extra element!
return [
// Don't forget the keys :)
<li key="A">First item</li>,
<li key="B">Second item</li>,
<li key="C">Third item</li>,
];
}
(3)javascript表达式
表达式需要放在{}之中
(4)方法
该方法的返回值为一段字符串、一个react元素,一个数组包含字符串或者react元素
10、booleans,null和undefined在jsx中并不渲染
若需要在jsx中展示false、true、null或者undefin则需要先把他们转变为字符串