react中的JSX注意点

本是古典何须时尚 2022-05-23 10:35 213阅读 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 条评论，213人围观）

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

相关阅读

相关 React（二）—— JSX

前言现在我们知道了 React 是什么，让我们来看看本系列其余部分将会出现的一些术语和概念。在上一篇文章中，我们研究了 React 是什么，并在高层讨论它是...

小灰灰/ 2024年04月17日 13:52/ 0 赞/ 83 阅读

相关 React.js 中的 JSX

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

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

相关【React】JSX语法

目录一、前言二、JSX介绍三、JSX原理 1、DOM结构示例 2、HTML的JSX结构示例 3、编译之后的

桃扇骨/ 2023年10月16日 14:08/ 0 赞/ 66 阅读

相关 React中JSX语法的详解

1、基本概念： `React` 使用 `JSX` 来替代常规的`JavaScript`。 `JSX` 是按照 `XML` 语法规范的 `JavaScript` 语法扩

落日映苍穹つ/ 2023年07月11日 11:03/ 0 赞/ 20 阅读

相关 react jsx语法

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

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

相关 jsx语法的几个注意点

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

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

相关 React学习 -- JSX

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

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

相关 react中的JSX注意点

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

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

相关 React之JSX

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

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

相关 react jsx语法

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

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