Skip to main content

DOM Attributes in React 16

· 3 min read

在过去， React通常忽略未知的DOM属性。 如果你写的JSX使用了React不能识别的属性， React将会跳过它， 比如：

// Your code:
<div mycustomattribute="something" />

将会渲染成一个空的div元素，在React15中。

// React 15 输出:
<div />

在React 16中， 我们做了改变。 现在任何未知的属性都会在DOM中出现：

// React 16 输出:
<div mycustomattribute="something" />

为什么我们改变了这个行为​

React提供了一套基于JS API来生成DOM。 因此React像DOM APIs一样使用 canelCase 约定来操作DOM相关的属性.

<div tabIndex={-1} />

然而之前, 我们在React DOM类库中维护了DOM白名单属性列表, 强制必须使用这些DOM属性:

// ...
summary: 'summary',
tabIndex: 'tabindex'
target: 'target',
title: 'title',
// ...

这导致两个弊端:

  • 你不能传递使用自定义属性. 对于使用浏览器专有的非标准属性, 尝试使用新的DOM APIs, 或者集成第三方类库等场景, 自定义属性是有用的.
  • 随着时间维护的属性列表不停增长, 删除大部分白名单属性列表有助于减少类库尺寸.

随着React 16的到来, 你现在可以向HTML或者SVG元素传递自定义属性, 而且React不再在生产环境包含整个白名单属性列表.

note

你依然可以使用React提供的已知属性命名

// Yes, please
<div tabIndex={-1} />

// Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`?
<div tabindex={-1} />

总而言之, React 16提供了一些兼容, 你在React中使用DOM组件的方式没有发生改变.

我应该在自定义属性中保存数据吗​

我们不鼓励你在DOM属性中保存数据. 即便不得已需要这么做, data- 属性也许是一个更好地方式, 但是大部分情况下, 属性应该保存在React组件的状态中, 或者外部存储.

如果你需要使用新的或者非标准DOM属性, 或者你需要集成第三方类库, 这个新特性带来了便利.

Data 和 ARIA 属性​

就像上面说的, React允许你自由传递使用 data- 和 aria- 属性:

<div data-foo="42" />
<button aria-label="Close" onClick={onClose} />

原文翻译自 DOM Attributes in React 16 - September 08, 2017 by Dan Abramov