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>HelloWorld</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>