【简单的react】 当你需要使用JSX的拼接的时候

看了网上大量的文章，都不如一个实战来的更深有体会。

参考资料：

http://huziketang.mangojuice.top/books/react/lesson2

---

任何新的概念都会加深新人理解的难度，所以这里不会出现新词，所有的解释我都最多采用前端常用技术作为辅助理解的文字描述。

本节目的

这节讲JSX的拼接是因为你可能会写简单的JSX，但当你遇到数据判断时，你 希望能完成像js拼接HTML字符串那样组合成最终的结构。

帮助简单理解一下

JSX不同与DOM节点，它是react的标记语言，标记语言本身就是表示和存储数据。就像一个有格式的变量，不停地被赋予值，分配出去。

假如一个文件存储了如下JSX结构

<div>
	<div>I love you</div>
</div>

用JS读出来，直接放到页面上，同样的结构会被浏览器引擎渲染成预定义的样式，浏览器能识别div，那它就是html，html是有默认展示效果的。
两者之间的联系在于此。
区别在，标记语言可扩展。你能生成以下一堆标记，whatever

<myHouse>
  <chair>椅子</chair>
  <desk>桌子</desk>
</myHouse>

但你把他们读出来放到页面上，不是浏览器预定义的标签全都被识别成行内标签，也没有seo的效果。

JSX就像一种具有特殊规则的数据载体。

当你需要使用JSX的拼接的时候

JSX内使用{}写javascript逻辑

export default function Myhouse(){
	var name = "我要上天一起吗";
	return (
		<myHouse>
 			<chair>椅子</chair>
 			<desk>桌子</desk>
 			<card>{name}</card>
 		</myHouse>
	)
}

但注意JSX禁止

{}内不允许出现分号，不能使用if else语句，判断句以三元运算代替

但是它可以

使用三元句式可以接受大型JSX“字符串”拼接（如果你把它想象成js的html字符串变量）


拼接不是使用连接符+， 而是使用()把jsx包起来（单行能省略()）


（）里面的JSX语法，只接收一个根标签


()内可以连续拼接，比如（{ （ { （ ）} ） {（）} }），它不像变量提升，你写在哪里就原样输出在哪个位置，变量会被{}符号自动解析掉


想要优雅点，拼接的JSX内容都可以在return()执行之前生成，使用某个变量(variable)接住，在return里直接使用{variable}

先来一个单行JSX


再来个多行的效果。JSX是直接写在行内相应位置的。


优雅点，我们这样写

数组（不能是json对象，json要转化为array，可以使用Object.values(obj)）map遍历写法的两种赋值方式

一个是直接写在JSX里面

用{}包含，如果内部返出jsx包含了变量，变量还要再加上{}，只要jsx内部遇到变量，想要解析都要用{}包住变量，而js却可以不加任何修饰符直接写jsx语法。


因为{}（大部分情况下）最终都是返回一个jsx节点，上面arr的等价写法是第二种把arr的结果直接在return之前赋予一个变量，然后赋给jsx。

return (
	<div>
		<header></header>
		<section>
			{true ? <div><span>1</span></div> : <div><span>2</span></div>}
		</section>
		<footer></footer>
	</div>
}

判断的后返回的jsx可自行加（）然后做折行。

over。