深入JSX
这一段React的代码会被编译为下面的形式:
<MyButton color='red' fontSize='24px'>
这里的内容会被传递到props.children中
</MyButton>
编译为:
React.createElement(
MyButton,
{color:'red',fontSize:'24px'},
'这里的内容会被传递到props.children中'
)
关于这个React.createElement
函数的详细讲解可以看这里。
这里还有一个在线的转换内容,可以把你的语法糖直接转换成编译后的内容Babel。
注释语法
JSX能采用的注释语法是:
{/*单行注释*/}
{/*
这样写成多行注释也是可以的
*/}
指定React元素类型
自定义的组件名称首字母一定要大写,小写代表的是原生的html标签!!!
默认为true
例如下面这个组件调用:
<MyTextBox undefinedParam />
其中的undefinedParam
是未设定值的,所以默认成下面的模式:undefinedParam={false}
空行、空格自动移除
<div>Hello World</div>
<div>
Hello World
</div>
<div>
Hello
World
</div>
<div>
Hello World
<div>
上面的所有内容,都会被编译成第一种形式:<div>Hello World</div>
。
bool、Null、Undefined都会被忽略
下面的渲染方式是一致的:
<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>