一个jsx语法引发的一系列思考

219 阅读2分钟

前些天遇到一个问题,在传递itemLayout时,总是报错,报错如下:

从提示来看,是找不到labelCol名称,但是我明明传递了这个值,不知道哪里出错了,后来问了同事,他说看样子像是jsx把labelCol解析成变量了,试一下{{labelCol:{span:3}}}的形式。果然可以了

之前认为jsx语法很简单,照着用就行了,可是不了解原理,出错的时侯就会不知道从哪里下手。于是重看了一遍React官网上关于jsx的部分,小小的总结一下

一 什么是jsx语法?

jsx是js的语法扩展,可以用来生成React元素。

之前我们构建一个网页,一般会生成三个文件。html / css / js,现在在react中,我们可以只生成一个jsx文件和一个css文件。也就是说,jsx文件是js+html

二 jsx语法有哪些?这些语法有什么作用?

  1. { }

    这就是我出错的原因,在jsx语法中,会把{ }里面的内容解析为变量,而我在这里是想作为对象使用,所以要用双括号来表明里面是一个对象

  2. < />

    在jsx中,可以自定义组件,这些组件的作用就是可以通过props来传递属性或children等内容,通过这些来渲染页面。

  3. 属性采用小驼峰式的命名方式, 因为jsx在语法上更接近js,所以和js中变量的命名保持一致

  4. jsx表示的是对象

    使用jsx语法会生成react元素,react会读取这些元素,然后去构建DOM,文档中的一句话引起了我的注意,文档中说react元素不等于react组件,那react组件是什么?它和react元素又是什么关系?

组件,从概念上讲类似于js函数,接收porps作为属性,返回react元素,render渲染的也是react元素。如果引入一个组件,使用的时候就要以组件的方式去使用,即 <ReactEle></ReactEle>