Stop doing data-*, aria-*, start using dataSet
未关闭
还没有人认领这个 Issue。
Component: DOM
Partner
Resolution: Backlog
Type: Feature Request
- 主要语言
- JavaScript
- 星标
- 251k
- 派生
- 51.4k
- 平均合并
- 2 天 4 小时
- 30 天内合并 PR
- 53
描述
The DOM already exposes data-* as dataset but it's doing transformation from hyphenated to camelCase. From MDN:
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe
</div>
var el = document.querySelector('#user');
// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''
el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.
// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true
We should just start supporting dataSet (because camelCase). This will allow a couple things:
- easier reasoning about data attributes (
Object.keys(this.props.dataSet)) - easier merging (
<div dataSet={merge(this.props.dataSet, {extra: 'value', override: 'value'})} />) - easier (potentially faster?) updates (just modify
node.dataset)
We'll want to do the reverse of what the DOM is doing. eg <div dataSet={{dateOfBirth: 'val', foo: 'bar'}} /> becomes <div data-date-of-birth="val" data-foo="bar"></div>.
To the best of my knowledge, aria-* doesn't have a corresponding API, but we should make it work the same way. I think ariaSet makes sense.
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
未指定任何仓库文件、测试或入口点。首先定位现有的 data-* 和 aria-* 属性处理逻辑,并将其与 issue 中的 dataset 示例进行比较。完成的标准是:dataSet 和 ariaSet 的行为(包括从 camelCase 到属性的转换以及合并)已定义并由测试覆盖。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- javascript, react
- 领域
- frontend
- Issue 类型
- 功能
- 难度
- 5/5
- 预计耗时
- 一周以上
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100