A爆了
//等同于 let element=React.createElement( "h1", {className:"aaa"}, "A爆了" ) 那么是不是我直接let {type,props,children}=element就可以得到 h1、{className:"aaa"}和A爆了了呢？我还是太天真了。type确实是h1，但是props打出来是{className: "aaa", children: "A爆了"}。咦？怎么children混在了这里，那么后面得children呢？毫无疑问undefined。也就是说一个React.createElement或者JSX的对象的结构是这样的： { type:"h1", props:{ className:"aaa", children:"A爆了" } } JSX的花式写法（内含错误演示） JSX有许多中写法，看的我是眼花缭乱，不如来分析分析这些写法的奥秘，为什么要这么写，然后找一种自己喜欢的方式来写。这里我会以let element=XXX为例子，然后大家可以直接ReactDOM.render(element, document.getElementById('root'));这样渲染。 写法一：一个标签内嵌纯文字 我习惯在写JS的时候，将这些标签写在字符串中，然后拼接起来。看到这么写，真的觉得是个bug，浏览器一定会报错的！然而在react中，不会报错的，这是正确的。 let element=A爆了
ReactDOM.render(element, document.getElementById('root')); 错误写法演示：无标签纯文字 那如果是纯文字呢？华丽丽地报错了。说名JSX还是需要标签包裹的。 let element=A爆了 写法二：一个标签嵌套标签混合文字 那么我们多加几个子元素进，也是OK的，没什么毛病。 let element=aaaA爆了bbbb
写法三：Fragment包裹所有！ 错误写法演示：多个标签并列 如果是很多个并列地兄弟节点呢？突然兴奋！报错了~果然不能皮。为什么呢？大家都是正正经经的HTML标签啊。 let element=A爆了
A爆
官方给出的解释是：必须包裹在一个闭合的标签内。意思就是说不能N个闭合标签并列吗？ let element=A爆了
A爆
A爆了
A爆
A爆了
A爆
A爆了
A爆
To get started, editsrc/App.js and save to reload.
.....
}
这里就有一个小知识点，js语言设计中return的内容必须一行完成，不要跟回车，不然就会报错。（真是任性的操作）也就是说像下方这么写就没有问题。但是我就没办法保证整整齐齐的标签了啊！这个排版怎么排都丑。所以这个时候()就展现出了他的魅力，代表了一个整体，告诉return我还没结束。所以大家也不要被()给迷惑了，不要怕他。
render() {
return
.....
}
JSX中的标签属性
写JSX会发现，虽然我是在写HTML，但是有些属性好奇怪啊，经常写错，比如最常见的className。我总结出一点我们写标签的时候是HTML，写属性的时候要用JS思维。这样就不复杂，也不难记拉！
\\JS中怎么取class属性的呢？
document.getElementById('myid').className
\\遇到特殊的，这个for在JS中怎么获取呢？
document.getElementById('label').htmlFor
那么问题来了，有一个名为style的属性，你要怎么处理？style就比较复杂了，他不是一个值一个字符串能够搞定搞定的。我先在报错的边缘试探下吧。
试探一：字符串！
let element=
{arr.map((v,i)=>{
if(v===1){
return A爆了
}else{
return B爆了
}
})}
)
但是如果JS在标签<>外部的话，就可以直接使用，而不用加上{}：
let element=
arr.map((v,i)=>{
if(v==1){
return
A爆
报错啦！报错啦！官方提示我们Thestyleprop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.也就是说style需要从样式属性映射到他的值，字符串是不可以的。所以就需要{marginRight: spacing + 'em'}像这样的对象才可以。那为什么要再加一层{}?
试探二：单层{}
let element=A爆
直接编译错误了。也就是说JSX中不能直接包含JS的函数。而要用{}包裹起来JS函数。所以才有了双层{}。第一层是代表我是JS，第二层其实就是属性对象本身了。大家不用再试探底线了老老实实：
let element=A爆
如果想再JSX中加注释怎么办？直接肯定报错囧。我们可以用{/*XXX*/}的方式注释，因为{}标签里面是js函数，我们用JS的注释就OK拉！（其实JSX还是JS啊。）
JSX中使用JS
上文提到{}中包含的是JS，那么我们是不是可以玩出更多的花样的？因为{}中我们就可以用JS为所欲为了！
比如循环（正确）：
let arr=[1,2,3]
let element=(
{arr.map((v,i)=>
{v}-A爆
)}
)
如果不想循环直接return，可以这样，内部加上大括号，再继续写额外操作。别忘了return，只有=>函数可以省去return
let arr=[1,2,3]
let element=(
{v}-A爆
}else{
return {v}-B爆
}
})
大家注意了，这里无论如何element都是一个对象，所以赋予他的值也只能是对象。所以不能直接if/else进行操作，建议再JSX外层操作，而不是直接再JSX中的外层操作。
比如这样，那就只能等吃红牌了。
let element=(
if(v===1){
return A爆了
}else{
return B爆了
}
)
最好是这样：
let v=1;
let element;
if(v===1)
element=A爆了
}else{
element=B爆了
}
在Comopent的render中，我么可以这么写：
render() {
if(v===1){
return A爆了
}else{
return B爆了
}
}
研究完之后，发现JSX就是JS啊，以及每次用JSX“语法”写的元素，都要返回一个数组或者是对象。只要牢记这一点，就可以玩转JSX。https://www.cnblogs.com/cherryvenus/p/9590589.html
