jsx语法

jsx语法

jsx的官方定义是xml语法的ECMAScript扩展。react官方早期为jsx语法开发了一套编译器JSTransform，目前已经不再维护，全部采用Babel的jsx编译器实现。

1. jsx的基本语法

   1.1. xml基本语法

   标签可以任意嵌套，可以像HTML一样清晰的看到DOM树状结构及其属性。比如我们构造一个List组件：

   const List=()=>(
       <div>
           <Title>this is titleTitle>
           <ul>
               <li>list itemli>
               <li>list itemli>
               <li>list itemli>
           ul>
       div>
   );

   注意：

   • 定义标签时，只允许被一个标签包裹。
   • 标签一定要闭合

   1.2 元素类型

   • DOM元素 首字母小写
   • 组件元素 首字母大写

   1.3 注释

   在html中注释写成 这样的形式,但在jsx中并没有定义注释的转换方法,仍然可以使用jacascript的注释方法，在一个组件的子元素位置使用注释需要用{}包起来,实例：

   const App=(
       <Nav>
            {/*节点注释*/}
            <Person>
               /*多行
               注释
               */
   
            person>
       Nav>
   );

   在html中有一类特殊的注释就是条件注释,常用于判断浏览器的版本：

   上述方法可以使用javascript代替

   {
       (!!window.ActiveXObject||'ActiveXObject' in window)?
   work in ie
   :''
   }

   • DOCTYPE是一个非常特殊的标志，在html中这个标签没有闭合的。

   1.4 元素的属性

   • DOM元素的属性
     DOM元素的属性是标准规范属性，有两个列外class和for，class属性改为className,for属性改为htmlFor
   • 组件元素的属性是完全自定义的属性，也可以理解为组件所需要的参数
   • Boolean属性
     省略Boolean会导致jsx认为bool值设为true,要传false,必须使用属性表达式。常用于表单元素中，比如disable,require,checked readOnly等

   • 展开属性 如果事先知道组件需要的全部属性，可以使用es6写

     const data={name:'foo',value:'bar'};
     const component=value={data.vale} />

   • 也可以写成

   const data={name:'foo',value:'bar'};
   const component=
   

   • 自定义html属性
     如果在jsx中往DOM元素中传自定义属性,react是不会渲染的，如果要是用html自定义属性，要使用data-前缀,在自定义标签中任意属性都是被支持的.

   1.5. javascript属性表达式
   属性值要使用表达式，只要用{}替换”“即可：

   //输入(jsx)：
   const person=window.isLoggedIn?winsow.name:''} />;
   //输出(javascript)
   const person=React.createElement(Person,{name:window.isLoggedIn?window.name:''});

   子组件也可以作为表达式使用

   1.6. HTML转义
   react会将所有要显示到DOM的字符串转义，防止XSS.所以，如果JSX中含有转义后的实体字符，比如©，则DOM中不会正确显示,因为react自动把©中的特殊字符转义。
   有几种解决办法：

   • 直接使用utf-8字符
   • 使用Unicode编码查询编码
   • 使用数组封装
     {[‘cc’, ©,’2015’]}
   • 直接插入原始的HTML