React.js 官方资料摘记：深入JSX

深入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>