jsx语法
jsx的官方定义是xml语法的ECMAScript扩展。react官方早期为jsx语法开发了一套编译器JSTransform,目前已经不再维护,全部采用Babel的jsx编译器实现。
jsx的基本语法
1.1. xml基本语法
标签可以任意嵌套,可以像HTML一样清晰的看到DOM树状结构及其属性。比如我们构造一个List组件:
const List=()=>( <div> <Title>this is title</Title> <ul> <li>list item</li> <li>list item</li> <li>list item</li> </ul> </div> );
注意:
- 定义标签时,只允许被一个标签包裹。
- 标签一定要闭合
1.2 元素类型
- DOM元素 首字母小写
- 组件元素 首字母大写
1.3 注释
在html中注释写成 这样的形式,但在jsx中并没有定义注释的转换方法,仍然可以使用jacascript的注释方法,在一个组件的子元素位置使用注释需要用{}包起来,实例:
const App=( <Nav> {/*节点注释*/} <Person> /*多行 注释 */ </person> </Nav> );
在html中有一类特殊的注释就是条件注释,常用于判断浏览器的版本:
<!--[if IE]> <p>work in ie</p> <![endif]-->
上述方法可以使用javascript代替
{ (!!window.ActiveXObject||'ActiveXObject' in window)?<p>work in ie</p>:'' }
- 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=<Component name={data.name} value={data.vale} />
也可以写成
const data={name:'foo',value:'bar'}; const component=<Component {...data} />
- 自定义html属性
如果在jsx中往DOM元素中传自定义属性,react是不会渲染的,如果要是用html自定义属性,要使用data-前缀,在自定义标签中任意属性都是被支持的.
1.5. javascript属性表达式
属性值要使用表达式,只要用{}替换”“即可://输入(jsx): const person=<Person name={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