11-react DOM元素 | 宋宇的文档笔记

DOM 元素

在 React 中，所有的 DOM 特性和属性（包括事件处理）都应该是小驼峰命名的方式。例如，与 HTML 中的 tabindex 属性对应的 React 的属性是 tabIndex。例外的情况是 aria-_ 以及 data-_ 属性，一律使用小写字母命名。比如, 你依然可以用 aria-label 作为 aria-label。

属性差异

React 与 HTML 之间有很多属性存在差异：

checked

当 <input> 组件的 type 类型为 checkbox 或 radio 时，组件支持 checked 属性

defaultChecked 则是非受控组件的属性，用于设置组件首次挂载时是否被选中。

className

className 属性用于指定 CSS 的 class，此特性适用于所有常规 DOM 节点和 SVG 元素，如 <div>

如果你在 React 中使用 Web Components（这是一种不常见的使用方式），请使用 class 属性代替。

dangerouslySetInnerHTML

dangerouslySetInnerHTML 是 React 为浏览器 DOM 提供 innerHTML 的替换方案。

function createMarkup() {
  return { __html: "First &middot; Second" };
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

1
2
3
4
5
6
7

htmlFor

由于 for 在 JavaScript 中是保留字，所以 React 元素中使用了 htmlFor 来代替。

onChange

onChange 事件与预期行为一致：每当表单字段变化时，该事件都会被触发。浏览器本身的 onChange 是当用户失去焦点才会执行

selected

<option> 组件支持 selected 属性。你可以使用该属性设置组件是否被选择。这对构建受控组件很有帮助，但是一般我更喜欢在 select 标签上设置 value 来控制。

style

style 接受一个采用小驼峰命名属性的 JavaScript 对象，而不是 CSS 字符串。这与 DOM 中 style 的 JavaScript 属性是一致的，同时会更高效的，且能预防跨站脚本（XSS）的安全漏洞。例如

const divStyle = {
  color: "blue",
  backgroundImage: "url(" + imgUrl + ")",
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

1
2
3
4
5
6
7
8

Style 中的 key 采用小驼峰命名是为了与 JS 访问 DOM 节点的属性保持一致（例如：node.style.backgroundImage ）。浏览器引擎前缀都应以大写字母开头，除了 ms。因此，WebkitTransition 首字母为 ”W”。

React 会自动添加 ”px” 后缀到内联样式为数字的属性后。如需使用 ”px” 以外的单位，请将此值设为数字与所需单位组成的字符串。例如：

// Result style: '10px'
<div style={{ height: 10 }}>
  Hello World!
</div>

// Result style: '10%'
<div style={{ height: '10%' }}>
  Hello World!
</div>

1
2
3
4
5
6
7
8
9

value

<input> 和 <textarea> 组件支持 value 属性。你可以使用它为组件设置 value。这对于构建受控组件是非常有帮助。defaultValue 属性对应的是非受控组件的属性，用于设置组件第一次挂载时的 value。

moreopen in new window

# DOM 元素

# 属性差异

# checked

# className

# dangerouslySetInnerHTML

# htmlFor

# onChange

# selected

# style

# value