react / react/react

Stop doing data-*, aria-*, start using dataSet

未关闭
#1,259 33 条评论 55 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 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.

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

未指定任何仓库文件、测试或入口点。首先定位现有的 data-* 和 aria-* 属性处理逻辑,并将其与 issue 中的 dataset 示例进行比较。完成的标准是:dataSet 和 ariaSet 的行为(包括从 camelCase 到属性的转换以及合并)已定义并由测试覆盖。

由索引模型根据 Issue 内容生成。

评估

技术栈
javascript, react
领域
frontend
Issue 类型
功能
难度
5/5
预计耗时
一周以上
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。