react中的JSX注意点

本是古典何须时尚 2022-05-23 10:35 196阅读 0赞

###  ###

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

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

发表评论取消回复

表情：

评论列表（有 0 条评论，196人围观）

还没有评论，来说两句吧...

相关阅读

相关 React.js 中的 JSX

如果你只是简单地 google 一下 JSX，google 给了我们一个模糊粗略的定义，比如：JSX 代表 JavaScript XML。JSX 允许我们在 React 中编写

深藏阁楼爱情的钟/ 2024年03月16日 16:16/ 0 赞/ 4 阅读

相关 react jsx语法

//调用react下面的createElement方法，传入第一个参数是tag //第二个是属性，第三个是子元素集合 import React

港控/mmm°/ 2023年07月06日 11:34/ 0 赞/ 31 阅读

相关 jsx语法的几个注意点

1. \{\}里面放的内容必须有返回值函数(当成组件可以) 对象不可以 (例外: 如果引入的是 style 样式, 可以) 数组普通数

绝地灬酷狼/ 2022年12月11日 12:24/ 0 赞/ 198 阅读

相关 React(2).JSX理解

JSX JSX 是 React 的核心组成部分，它使用 XML 标记的方式去直接声明界面，界面组件之间可以互相嵌套。 React 使用 JSX 来替代常规的 Ja

心已赠人/ 2022年10月31日 12:21/ 0 赞/ 164 阅读

相关 React之JSX入门

React是由ReactJS与React Native组成，其中ReactJS是Facebook开源的一个前端框架，React Native 是ReactJS思想在nati

蔚落/ 2022年09月21日 14:28/ 0 赞/ 236 阅读

相关 React学习 -- JSX

React为了方便组件化，需要构建HTML结构化页面。那么React是如何操作的呢？答案是，React通过创建与更新虚拟元素来管理整个虚拟DOM。虚拟DOM是什么：由于DO

秒速五厘米/ 2022年06月17日 11:49/ 0 赞/ 235 阅读

相关 react中的JSX注意点

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

本是古典何须时尚/ 2022年05月23日 10:35/ 0 赞/ 197 阅读

相关 React之JSX

React JSX React 使用 JSX 来替代常规的 JavaScript。 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。我们不需

心已赠人/ 2022年04月16日 03:46/ 0 赞/ 275 阅读

相关 react启动jsx语法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

刺骨的言语ヽ痛彻心扉/ 2021年12月14日 03:07/ 0 赞/ 328 阅读

相关 react jsx语法

jsx语法 (1)遇到{}按照js语法解析,无<>时也按照js语法解析 (2)遇到<>按照html语法解析 (3)遍历时,每一个

ゝ一世哀愁。/ 2021年07月24日 15:17/ 0 赞/ 489 阅读