react中的JSX注意点

• 定义组件时，最外层必须有一个标签进行包裹。例如：      

/* 报错 */
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>