react中的JSX注意点

本文介绍了在React中定义组件时的一些重要规范,包括组件标签的包裹、标签的闭合、自闭合标签的使用、组件名的大小写约定、DOM属性的命名习惯、布尔属性的处理方式及特殊字符的展示方法。

  • 定义组件时,最外层必须有一个标签进行包裹。例如:      
/* 报错 */
const component1 = <div>123</div><div></div>

/* 正确 */
const component2 = <div><div>123</div><div></div></div>

原因:组件中的标签最终会被转换成React.createElement来进行创建,最外层没有一个唯一的标签进行包裹,在转换时没有办法解析,不可能同时创建多个并列的组件同时返回。

  • 标签一定要闭合,html中的自闭合标签可根据是否有子元素来决定是否闭合。例如:
/* 报错 */
const component1 = <div>

/* 正确 */
const component2 = <div></div>
/*正确*/
component3 = <img src="http://www.xxx.com/xxx.jpg"> 

  • 引用html标签为首字母小写, 引用组件时首字母必须大写。例如:
/*这里的 <App/> 为组件*/
const component= <div><span></span><App/></div>



  • dom元素熟悉class改为className, for改为htmlFor。原因 class 和 for 是 JavaScript的关键字

  

  •   省略Boolean属性值,JSX会认为bool值设置为了true ,常见的Boolean属性值的标签有checked, disabled, required, readonly等。 例如:  
<input type="checkbox" disabled> 和 <input type="checkbox" disabled={true}>相等

  • React 会将所有要显示到Dom中的元素转移,防止xss攻击。也就是说字符串中如何含有特殊字符可能无法正确显示。有以下几种解决办法:

     (1)直接使用UTF-8字符,例如:@copy直接使用 ©©©  

     (2)使用对应的Unicode编码

     (3)使用数组封装, 例如:<div>{["<span>@copy</span>"]}</div>

       (4)  直接插入原始的html

       (5) 使用 dangerouslySetInnerHTML属性。例如 <div dangerouslySetInnerHTML={{__html:"@copy"}}></div>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值