二十四、DOM Elements
来源:互联网 发布:矩阵乘积求导法则 编辑:程序博客网 时间:2024/06/11 03:58
二十四、DOM Elements
React实现了一个独立于浏览器的DOM系统,用于提高性能和处理浏览器兼容性。 React作者借此机会在浏览器DOM实现中清理了一些粗糙的实现(恶心的原生DOM操作)。
在React中,所有DOM properties
和 attributes
(包括event handle
)都应该是驼峰命名法
。 例如,HTML属性tabindex
对应于React中的tabIndex
属性。 特殊的是aria- *
和data- *
属性,应该是全部小写的。
Attributes的区别
有许多属性在React和HTML之间有不同的表现:
checked
checked属性在<input type="checkbox">
或<input type="radio">
中使用。 您可以使用它来设置是否选中该组件。 这对可控组件很有用。 defaultChecked
是默认选中,它在首次装入组件时是默认选中的。
className
因为class
是Javascript的关键字,所以在指定CSS类时,使用className
属性。这适用于所有常规DOM和SVG元素,就像<div>
,<a>
或者其他标签。
如果使用React 和 Web Components
(这是不常见的),请把ClassName
改为class
属性。
dangerouslySetInnerHTML
dangerouslySetInnerHTML
是React替换在浏览器DOM中使用innerHTML
。
一般来说,从代码设置HTML是有风险的,因为很容易无意中将用户暴露于跨站点脚本(XSS)攻击
。 所以,你可以直接从React设置HTML,但是你必须输入dangerouslySetInnerHTML
并使用__html
键传递一个对象,提醒自己这是危险的。 例如:
import React from 'react';import ReactDOM from 'react-dom';function createMarkup() { return {__html: 'First <<>> Second'};}function MyComponent() { return <div dangerouslySetInnerHTML={createMarkup()} />;}ReactDOM.render( <MyComponent />, document.getElementById('root'));
htmlFor
由于for
是JavaScript中的保留字,React元素使用htmlFor
。
onChanged
onChange
事件的行为与您期望的一样:每当表单字段更改时,将触发此事件。 我们故意不使用现有的浏览器行为,因为onChange
是其行为的误称,React依赖此事件来实时处理用户输入。
selected
selected
属性在<option>
中使用。 您可以使用它来设置是否选择了组件。 这对控制类的组件很有用。
style
style
属性接受一个驼峰命名法的JavaScript对象,而不是CSS字符串。 这与DOM元素style
的JavaScript属性一致,更高效,并防止XSS安全漏洞。 例如:
const divStyle = { color: 'blue', backgroundImage: 'url' + imgUrl + ')',};function HelloWorldComponent() { return <div style={divStyle}>HelloWorld</div>;}
请注意,样式不自动设置css的前缀。 要支持旧版本的浏览器,您需要提供相应的样式属性:
const divStyle = { WebkitTransition: 'all', msTransition: 'all',};function ComponentWithTransition() { return <div style={divStyle}>This should work cross-browser</div>;}
style的key是驼峰命名法,以便与从JS访问DOM节点上的属性(例如node.style.backgroundImage
)一致。 ms以外的浏览器前缀应以大写字母开头。 这就是为什么WebkitTransition
有一个大写“W”。
value
<input>
和<textarea>
支持value属性。 您可以使用它来设置元素的值。 这对控制类组件很有用。 defaultValue
是默认值,在组件首次装入时将会设置这个默认值。
- 二十四、DOM Elements
- JavaScript学习笔记二十四:操作DOM
- 统计学习精要(The Elements of Statistical Learning)课堂笔记(二十四):聚类
- 二十四
- 轻松学习JavaScript二十四:DOM编程学习之操作CSS样式(一)
- 十四、refs和DOM元素
- HTML DOM elements 集合包含哪些元素
- js的dom对象及elements对象
- 十月二十四日
- 二十四诗品
- 人生二十四年
- 二十四自我观
- 二十四句
- 腊月二十四
- 二十四節気
- 算二十四
- 二十四点算法
- 十二月二十四節氣候度數
- java分析可不可以调用方法交换两个数据(初级)
- Tensorflow学习记录
- COGNOS网页制作-COGNOS钻取函数
- windows运行打开服务命令
- js数组、对象、值拷贝方法总结
- 二十四、DOM Elements
- AtomicInteger的原理浅析
- QT QTableWidget 用法总结
- reflectance 和 albedo 的区别
- docker学习笔记
- 2203 亲和串
- 04 mysql表的增删改查
- Python中numpy.clip();numpy.fabs()的用法;以及math.pow()的说明
- 关于UML的一些学习