在React.js中深入了解JSX
最后，JSX只需使用createElement方法创建一个React元素。
示例
<FormButton color="green" buttonSize={10}> Submit </FormButton>将转换为-
React.createElement(
FormButton,
{color: 'green', buttonSize: 10},
'Submit’
)也可以添加自闭合标签。
大写自定义React元素
自定义的react元素必须以首字母大写命名，以便React能够区分html元素和react元素。
随着Jsx转换为React.createElement，React库必须在范围内。为此，如果需要使用jsx，我们必须导入React。
使用点运算符访问内部属性
元素的内部属性可以使用点运算符访问。
示例
<FormComponent.TextArea size=”50”/>
运行时选择Jsx元素的类型
常规表达式不能用于React元素的类型。首先，我们必须将其分配给大写变量，然后才能使用该变量。
示例
import React from 'react';
import { Cricket, Football } from './sportsTypes';
const components = {
cricket: Cricket,
football: Football
};
function Story(props) {
//下面的表达式是错误的，不能以这种方式使用。
return <components[props.cricket] player={props.name} />;
}为了使其工作，我们将其分配给大写字母-
import React from 'react';
import { Cricket, Football } from './sportsTypes';
const components = {
cricket: Cricket,
football: Football
};
function Story(props) {
//正确！JSX类型可以是大写的变量。
const Sport = components[props.cricket];
return <Sport player={props.name} />;
}jsx中的道具用法
道具可以是jsx表达式
示例
<Player score={4+6+4} />得分道具将计算为14
条件语句（如if，for）不能直接在jsx代码中使用，但可以单独使用，其结果变量可以在jsx中使用。
道具可以是字符串文字-
<Player name={‘Steve’}/>要么
<Player name=”Steve”/>
如果未提供，则props值将默认为true。这只是为了与html的默认行为兼容。
示例
<Player isPlaying />
等于
<Player isPlaying={true} />散布算子可以用来传递道具-
<Player {…props} />jsx中的Children元素
开始标签和结束标签之间的内容是jsx子元素。
<Player> Steve </Player>
子代也可以是jsx表达式或函数。如果jsx子级属于Booleannull，undefined类型，则将忽略它们。