React从入门到精通系列之(24)DOM Elements

二十四、DOM Elements

React实现了一个独立于浏览器的DOM系统,用于提高性能和处理浏览器兼容性。 React作者借此机会在浏览器DOM实现中清理了一些粗糙的实现(恶心的原生DOM操作)。

在React中,所有DOM propertiesattributes(包括event handle)都应该是驼峰命名法。 例如,HTML属性tabindex对应于React中的tabIndex属性。 特殊的是aria- *data- *属性,应该是全部小写的。

Attributes的区别

有许多属性在React和HTML之间有不同的表现:

checked

checked属性在中使用。 您可以使用它来设置是否选中该组件。 这对可控组件很有用。 defaultChecked是默认选中,它在首次装入组件时是默认选中的。

className

因为class是Javascript的关键字,所以在指定CSS类时,使用className属性。这适用于所有常规DOM和SVG元素,就像

或者其他标签。
如果使用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 
; } ReactDOM.render( , document.getElementById('root') );

htmlFor

由于for是JavaScript中的保留字,React元素使用htmlFor

onChanged

onChange事件的行为与您期望的一样:每当表单字段更改时,将触发此事件。 我们故意不使用现有的浏览器行为,因为onChange是其行为的误称,React依赖此事件来实时处理用户输入。

selected

selected属性在中使用。 您可以使用它来设置是否选择了组件。 这对控制类的组件很有用。

style

style属性接受一个驼峰命名法的JavaScript对象,而不是CSS字符串。 这与DOM元素style的JavaScript属性一致,更高效,并防止XSS安全漏洞。 例如:

const divStyle = {
    color: 'blue',
    backgroundImage: 'url' + imgUrl + ')',
};
function HelloWorldComponent() {
    return 
HelloWorld
; }

请注意,样式不自动设置css的前缀。 要支持旧版本的浏览器,您需要提供相应的样式属性:

const divStyle = {
    WebkitTransition: 'all',
    msTransition: 'all',
};
function ComponentWithTransition() {
   return 
This should work cross-browser
; }

style的key是驼峰命名法,以便与从JS访问DOM节点上的属性(例如node.style.backgroundImage)一致。 ms以外的浏览器前缀应以大写字母开头。 这就是为什么WebkitTransition有一个大写“W”。

value