|
|
|
@ -313,7 +313,7 @@ const VDOM = ( |
|
|
|
); |
|
|
|
``` |
|
|
|
|
|
|
|
所以我们得到一个结论，虚拟`DOM`中的任何一个标签都必须闭合。 |
|
|
|
所以我们得到一个结论：虚拟`DOM`中的任何一个标签都必须闭合。 |
|
|
|
|
|
|
|
### `jsx`中的标签 |
|
|
|
|
|
|
|
@ -350,4 +350,21 @@ const VDOM = ( |
|
|
|
|
|
|
|
所以说，当我们在写`jsx`的时候，不要胡乱起标签，`HTML`中有哪些标签，我们就用哪些标签。 |
|
|
|
|
|
|
|
那么我们便可以得到一个结论：如果`jsx`中标签首字母小写，那么则将该标签渲染为`HTML`中同名标签，若无同名标签则会报错。如果`jsx`中标签首字母大写，那么`react`就去渲染对应的组件，若该组件没有定义，则报错。 |
|
|
|
那么我们便可以得到一个结论：如果`jsx`中标签首字母小写，那么则将该标签渲染为`HTML`中同名标签，若无同名标签则会报错。如果`jsx`中标签首字母大写，那么`react`就去渲染对应的组件，若该组件没有定义，则报错。 |
|
|
|
|
|
|
|
## 总结 |
|
|
|
|
|
|
|
- `jsx`是类似于`XML`的`js`扩展语法 |
|
|
|
- `jsx`的本质是`React.createElement(compoment,props,...children)`方法的语法糖。 |
|
|
|
- `jsx`可以使用`HTML`标签，但是`jsx`表达式中的的标签不是`HTML/XML`标签 |
|
|
|
- `jsx`内需要通过`{}`来对`js`表达式进行支持。 |
|
|
|
- `jsx`任何标签中`class`属性的指定必须用`className`来指定 |
|
|
|
- `jsx`内联样式必须使用`style={{key: value}}`的方式来写 |
|
|
|
- `jsx`虚拟`DOM`只允许有一个根标签。 |
|
|
|
- `jsx`虚拟`DOM`中的任何一个标签都必须闭合。 |
|
|
|
- `jsx`中的标签在被渲染时会检查标签首字母 |
|
|
|
- 如果`jsx`中标签首字母小写，那么则将该标签渲染为`HTML`中同名标签，若无同名标签则会报错。 |
|
|
|
- 如果`jsx`中标签首字母大写，那么`react`就去渲染对应的组件，若该组件没有定义，则报错。 |
|
|
|
|
|
|
|
以上就是`jsx`的一些核心规则。 |
|
|
|
|
|
|
|
|
