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则需要先把他们转变为字符串