JSX语法及特点介绍

Posted 2020-08-17 爆炒小黄鸡

一、JSX语法

1.1 基本语法

1）首字母大小写；元素名即组件名，首字母需要大写。首字母小写时React会以为这是html的标准标签，因此自定义的组件名需要首字母大写，否则会报错。

2）嵌套；在render函数中return返回的只能包含一个顶层标签，否则也会报错。如：

var HelloWorld=React.createClass({
    render:function(){
       /* return (
             <h1>title</h1> 
             <p>Hello world</p>
        )*/  // 返回两个顶层标签，报错
        return (
            <div>
                <h1>title</h1>
                <p>Hello world</p>
            </div>
        )
    }
})

 3）求值表达式；JSX基本语法规则，遇到HTML标签（以<开头），就用HTML规则解析；遇到代码块（以{开头），就用JS规则解析。

 4）驼峰命名

 5）htmlFor,className;添加组件属性，需要注意，class属性需要写成className，for属性需要写成htmlFor,因为class和for是JS保留字 .组件的属性可以在组件类的this.props对象上获取，比如name属性可以通过this.props.name读取。

 

1.2 注释

注释可以添加在两个部分，

1）子节点中,子节点中时，添加多行注释需要用{/**/}大括号包起来。不能添加单行注释

2）属性中；多行注释直接/**/注释，单行注释用//，并且需要换行

var HelloWorld=React.createClass({
    render:function(){
        return <p
          /*添加多行注释到属性中*/
          name="test" // 添加单行注释后，需要换行
          >Hello world
         {/*添加多行注释到子节点中，用大括号包起来*/}</p>
    }
})