本质上来讲，JSX 只是为 React.createElement(component, props, ...children) 方法提供的语法糖。比如下面的代码：
<MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>编译为：
React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)
如果没有子代，你还可以使用自闭合标签，比如：
<div className="sidebar" />
编译为：
React.createElement(
'div',
{className: 'sidebar'},
null
)
指定 React 元素类型
JSX 的标签名决定了 React 元素的类型。
大写开头的 JSX 标签表示一个 React 组件。这些标签将会被编译为同名变量并被引用，所以如果你使用了 <Foo /> 表达式，则必须在作用域中先声明 Foo 变量。
React 必须声明
由于 JSX 编译后会调用 React.createElement 方法，所以在你的 JSX 代码中必须首先声明 React 变量。
比如，下面两个导入都是必须的，尽管 React 和 CustomButton 都没有在代码中被直接调用。
import React from 'react';
import CustomButton from './CustomButton';
function WarningButton() {
// 返回 React.createElement(CustomButton, {color: 'red'}, null);
return <CustomButton color="red" />;
}
点表示法
你还可以使用 JSX 中的点表示法来引用 React 组件。你可以方便地从一个模块中导出许多 React 组件。例如，有一个名为 MyComponents.DataPicker 的组件，你可以直接在 JSX 中使用它：
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" />;
}
practice
code:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
// <MyButton color="blue" shadowSize={2}>
// Click Me
// </MyButton>
<BlueDatePicker />
);
}
}
function MyButton(pram) {
return <div>color: {pram.color}, shadowSize: {pram.shadowSize}, text: {pram.children}</div>
}
const MyComponents = {
DatePicker: function DatePicker(props) {
return <div>Imagine a {props.color} datepicker here.</div>;
}
}
function BlueDatePicker() {
return <MyComponents.DatePicker color="blue" />;
}
export default App;首字母大写
当元素类型以小写字母开头时，它表示一个内置的组件，如 <div> 或 <span>，并将字符串 'div' 或 'span' 传 递给 React.createElement。 以大写字母开头的类型，如 <Foo /> 编译为 React.createElement(Foo)，并它正对应于你在 JavaScript 文件中定义或导入的组件。
我们建议用大写开头命名组件。如果你的组件以小写字母开头，请在 JSX 中使用之前其赋值给大写开头的变量。
import React from 'react';
// 正确！组件名应该首字母大写:
function Hello(props) {
// 正确！div 是有效的 HTML 标签:
return <div>Hello {props.toWhat}</div>;
}
function HelloWorld() {
// 正确！React 能够将大写开头的标签名认为是 React 组件。
return <Hello toWhat="World" />;
}
在运行时选择类型
你不能使用表达式来作为 React 元素的标签。如果你的确想通过表达式来确定 React 元素的类型，请先将其赋值给大写开头的变量。这种情况一般会在你想通过属性值条件渲染组件时出现：
import React from 'react';
import { PhotoStory, VideoStory } from './stories';
const components = {
photo: PhotoStory,
video: VideoStory
};
function Story(props) {
// 正确！JSX 标签名可以为大写开头的变量。
const SpecificStory = components[props.storyType];
return <SpecificStory story={props.story} />;
}
使用 JavaScript 表达式
<MyComponent foo={1 + 2 + 3 + 4} />字符串常量
<MyComponent message="hello world" />
<MyComponent message={'hello world'} />
默认为 True
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />
扩展属性
如果你已经有了个 props 对象，并且想在 JSX 中传递它，你可以使用 ... 作为扩展操作符来传递整个属性对象。下面两个组件是等效的：
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}字符串常量
<MyComponent>Hello world!</MyComponent>
JSX
<MyContainer>
<MyFirstComponent />
<MySecondComponent />
</MyContainer>
JavsScript 表达式
<MyComponent>foo</MyComponent>
<MyComponent>{'foo'}</MyComponent>
函数
通常情况下，插入 JSX 中的 JavsScript 表达式将被认作字符串、React 元素或这些内容的列表。然而，props.children 可以像其它属性一样传递任何数据，而不仅仅是 React 元素。例如，如果你使用自定义组件，则可以将调用 props.children 来获得传递的子代。
布尔值、Null 和 Undefined 被忽略
布尔值、Null 和 Undefined 被忽略
false、null、undefined 和 true 都是有效的子代，但它们不会直接被渲染。下面的表达式是等价的：
<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>
如果你想让类似 false、true、null 或 undefined 出现在输出中，你必须先把它转换成字符串 :
<div>
My JavaScript variable is {String(myVariable)}.
</div>
如果觉得文章写得还行，请点个赞。如果想与我进一步交流，可以关注我的公众号
公众号_前端微说.jpg
