深入学习jsx

jsx语法糖

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

上面的jsx其实是这样的

React.createElement(component,props,...children)
即:React.createElement(
	MyButton,
	{color:'blue',shadowSize:2},
	'Click Me'
)

基于以上语法糖  当需要使用到组件的时候 不仅需要引入所需要的组件，还需要引入'React'

例：
import React from 'react';
import CustomButton from './CustomButton';
function WarningButton() {
  // return React.createElement(CustomButton, {color: 'red'}, null);
  return <CustomButton color="red" />;
}

点引号的使用

可以直接使用点引号来引用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" />;//注意这里的点引号
}

扩展符使用技巧(...)

const { kind, ...other } = props;

这样kind代表一个具体的属性 ，other代表其他属性的集合

jsx的孩子

1、使用字符串（像使用html一样 里面的&amp会被转义）

例子:<MyComponent>Hello world!</MyComponent>

这个里面props.children就是字符串"Hello world!"

传递道具的时候可以使用字符串，当使用字符串作为道具的时候 它将被当作非转义的html文本来对待  

例如:一下两组例子中  是一样结果
<MyComponent message="hello world" />
<MyComponent message={'hello world'} />

<MyComponent message="<3" />
<MyComponent message={'<3'} />

jsx空白处理：开始标签和内容之间以及结束标签和内容之间没有空格，中间的内容部分的空白被压缩为一个空格

2、直接镶嵌其他jsx element  或者混合使用jsx element和字符串

3、可以使用孩子的Function

例如:    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>

那么在Repeat里面可以通过props.children（index）来调用这个函数

4、false, null, undefined,true这些都是有效的children但是他们不会渲染

例:下面几个是一样的结果
<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>

但是一般如果是0这种的话还是会照样渲染 例如下面：

<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

上面这个当length为0的时候还是会照样渲染为0而不会去执行后面的  所以当我们使用条件渲染的时候应该像下面这样写：

<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>

但是如果希望false, null, undefined,true这些值出现在在输出中可以把它转化成string例如下面:

<div>
  My JavaScript variable is {String(myVariable)}.
</div>