张亚涛
张亚涛

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

二十四、DOM Elements

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

在React中，所有DOM properties 和 attributes（包括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

和