react中集成其他框架与JSX Depth

在上面的两个例子中，就很好的去说明了刚才所叙述的两点。

5.运行时去选择类型，不能使用一般表达式作为React元素类型。如果您确实想使用一个通用表达式来表示元素的类型，那么只需首先将它分配给一个大写的变量。例如在下面的例子中，就很好的说明了这一点

6.props在JSX中，你可以使用任何的js表达式用{}包裹起来作为props，例如：

在这个时候props.foo的值为10，如果你使用if语句或者循环时，不能直接放在JSX中，此时你可以将这些放在JSX表达式的周围就行。例如在下面的这个例子中，就使用了if语句

7.字符串使用，可以将字符串直接使用在JSX中，例如下面的例子，其作用是等价的。

当你使用字符串的形式后，可以发生转译，因此下面的两种形式也是等价的。

8.props的默认值的true，当你没有给props赋任何值时，其props的值为true，因此下面的两种形式也是等价的

一般来说是不推荐去使用这种形式的，因为在es6中{foo}其等价于{foo:foo}，当你使用上面的这种形式后，会产生混淆。

9.传递属性，如果你的props是一个对象，你又想要通过JSX去传递，你就可以使用…将整个的props对象里面的内容进行传递，因此在下面的两个实例中，是等价的

在下面的这个实例中，该类型的props是传递是安全的使用的，并且没有传递到DOM的button中，所有的props都是通过…其他对象来进行传递的，是整个组件非常的灵活。扩展属性可能很有用，但是它们也很容易将不必要的道具传递给不关心它们的组件，或者将无效的HTML属性传递给DOM。建议谨慎使用这种语法

10.JSX Children中的一些用法

第一字符串，当你在你的组件中去包裹这种HTML中所说的文本节点时，里面的内容为字符串，并不会对里面的内容进行转义。例如在下面官方所提到写的例子中。

第二HTML中所说的文本节点的内容也会有去除空格的作用，如果你在组件标签的周围，或者是在标签中有很多空格时，在react中也会去去除空格，在下面有一些例子，其实他们的结果是等价的

你也可以在JSX中去嵌套很多的子JSX元素，你也可以将节点嵌套与组件嵌套使用在一起。

在react组件中也可以返回一个数组

11.js表达式作为包含的内容，通过{}将js表达式中的内容给包裹起来。

12.函数作为包含的内容

13.Booleans, Null, and Undefined 是被忽略的，因此在下面的这些实际例子中都是等价的。

在下面的这个例子中使用了逻辑运算符&&，但是上面的代码例子中，如果左边的式子是0是，就会打印出一个空数组，因此我们就得去使用下面的那种形式。

以上就是对于react中框架的集成与更深层次的JSX的运用