react中的JSX注意点

React组件定义规范
本文介绍了在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>


<think>我们正在讨论ReactJSX的常用语法。根据提供的引用内容,我们可以总结以下几: 1. JSXJavaScript XML的缩写,允许JavaScript中写类似HTML的结构。 2. JSX提高了代码可读性和可维护性,使构建UI更直观。 3. JSX在编译时被转换成纯JavaScript代码,执行更快,且是类型安全的。 4. JSX语法中必须有一个根元素包裹,否则会报错。 5. 在JSX中可以使用JavaScript表达式,用大括号{}包裹。 接下来,我将按照常用语法进行详细说明: ### 1. JSX基本元素 JSX的基本元素类似于HTML标签,但要注意一些关键区别: - 使用小驼峰命名法(camelCase)定义属性名,例如`className`代替`class`,`htmlFor`代替`for`(label标签)。 - 自闭合标签必须以`/>`结束,如`<img />`。 示例: ```jsx const element = <h1 className="greeting">Hello, world!</h1>; ``` ### 2. 在JSX中嵌入表达式 在JSX中,你可以通过大括号`{}`嵌入任何有效的JavaScript表达式,包括变量、函数调用、算术运算等。 示例: ```jsx const name = 'John'; const element = <h1>Hello, {name}</h1>; ``` ### 3. JSX中的条件渲染 在JSX中,可以使用条件语句(如三元运算符)或逻辑与(&&)运算符进行条件渲染。 示例(三元运算符): ```jsx const isLoggedIn = true; const greeting = <div>{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}</div>; ``` 示例(逻辑与): ```jsx const unreadMessages = ['msg1', 'msg2']; const messageCount = unreadMessages.length; const alert = <div>{messageCount > 0 && <h2>You have {messageCount} unread messages.</h2>}</div>; ``` ### 4. JSX中的列表渲染 使用数组的`map()`方法将数组转换为JSX元素列表。注意:每个列表项必须有一个唯一的`key`属性(通常是唯一ID),这有助于React高效更新列表。 示例: ```jsx const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li key={number.toString()}>{number}</li> ); ``` ### 5. JSX中的样式 有两种方式定义样式: - **内联样式**:使用对象形式,样式属性名使用小驼峰命名法(如`backgroundColor`),值用字符串表示。 - **外部CSS类**:通过`className`属性引用外部CSS类。 示例(内联样式): ```jsx const divStyle = { color: 'blue', backgroundColor: 'lightgray' }; const element = <div style={divStyle}>Hello Style!</div>; ``` ### 6. JSX中的事件处理 事件处理函数以小驼峰形式指定(如`onClick`),并将函数引用(而非字符串)作为值传递。 示例: ```jsx function handleClick() { console.log('Button clicked'); } const button = <button onClick={handleClick}>Click Me</button>; ``` ### 7. JSX中的注释 在JSX中写注释需要用大括号包裹,使用`/* */`或`//`。 示例: ```jsx <div> {/* 这是单行注释 */} { // 这也是单行注释,但注意换行问题 } <p>Hello World</p> </div> ``` ### 8. JSX的根元素规则 JSX表达式必须有一个顶层父元素。如果想添加额外标签,可以使用`<React.Fragment>`(或简写`<>`)包裹,这样会在DOM中增加额外节。 示例: ```jsx const fragment = ( <> <h1>Title</h1> <p>Content</p> </> ); ``` ### 9. JSX与HTML的区别 - 属性名使用小驼峰:`tabIndex`(JSX) vs `tabindex`(HTML)。 - 某些属性名同:如`className`(JSX)代替`class`(HTML)。 - 事件处理函数必须传入函数,而是字符串。 ### 小结 JSXReact的核心特性之一,它使得编写组件更加直观。通过掌握上述常用语法,你可以更高效地使用React开发应用。记住,JSX最终会被编译为`React.createElement()`函数调用,因此它本质上仍然是JavaScript。 §§相关问题§§ 1. JSX和HTML有什么区别? 2. 为什么在JSX中列表项需要key属性? 3. 如何在JSX中处理表单元素? 4. 如何避免JSX注入攻击(XSS)? 5. JSX中的`children`属性有什么作用?</think>### React JSX 常用语法教程 JSXJavaScript XML)是React的核心语法扩展,允许JavaScript中直接编写类似HTML的结构。以下是常用语法详解: #### 一、基础语法 1. **基本元素** 类似HTML标签,但需遵守XML规则(必须闭合标签): ```jsx const element = <h1 className="title">Hello JSX</h1>; // className 代替 class ``` 2. **根元素规则** 组件必须返回**单个根元素**,可用`<Fragment>`或`<></>`避免额外DOM节: ```jsx return ( <> {/* 空标签相当于 Fragment */} <Header /> <MainContent /> </> ); ``` #### 二、嵌入表达式 用`{}`包裹JavaScript表达式: ```jsx const user = { name: "Alice" }; const element = ( <div> <p>计算: {5 + 3}</p> {/* 输出: 8 */} <p>用户: {user.name.toUpperCase()}</p> {/* 输出: ALICE */} <p>时间: {new Date().toLocaleTimeString()}</p> </div> ); ``` #### 三、属性处理 1. **动态属性值** ```jsx const url = "https://example.com"; const img = <img src={url} alt="示例" />; ``` 2. **布尔属性** 省略值时默认为`true`: ```jsx <button disabled>击</button> // 等同于 disabled={true} ``` #### 四、条件渲染 1. **三元表达式** ```jsx <div>{isLoggedIn ? <LogoutButton /> : <LoginButton />}</div> ``` 2. **&& 短路运算** ```jsx {hasUnread && <Badge count={unreadCount} />} ``` #### 五、列表渲染 使用`map()`并添加唯一`key`: ```jsx const items = ["React", "Vue", "Angular"]; const list = ( <ul> {items.map((item, index) => ( <li key={index}>{item}</li> // key 提高渲染性能 ))} </ul> ); ``` #### 六、样式处理 1. **内联样式** 使用驼峰命名法的样式对象: ```jsx const style = { backgroundColor: "black", padding: "10px" }; <div style={style}>内容</div> ``` 2. **CSS类名** 通过`className`属性绑定: ```jsx <div className="container active">...</div> ``` #### 七、事件处理 驼峰命名法 + 函数引用(非字符串): ```jsx function handleClick() { alert("按钮被击"); } <button onClick={handleClick}>击</button> ``` #### 八、注释语法 需包裹在`{}`中: ```jsx <div> {/* 这是单行注释 */} { // 多行注释 } </div> ``` #### 九、JSX 原理 JSX 会被编译为 `React.createElement()` 调用: ```jsx // JSX 代码 <h1 id="title">Hello</h1> // 编译后 React.createElement("h1", { id: "title" }, "Hello"); ``` ### 注意事项 1. 避免使用JS关键字属性名(如`class` → `className`,`for` → `htmlFor`) 2. 自定义组件必须以**大写字母开头**(区分HTML标签) 3. 表达式中的`false`、`null`、`undefined`会渲染 > JSX 使React组件更直观,编译优化后执行更快,并在编译阶段捕获类型错误[^2][^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值