组件支持data-，aria-，role的属性

[handoudou]

antd-mobile version（antd-mobile版本）：1.0.8

Browser (or mark react-native) and its version（浏览器或react-native版本）: 浏览器

What did you do? Please provide steps to re-produce your problem.（请提供复现步骤）
What do you expected?（预期的正常效果）

目前组件支持data-，aria-，role的属性

What happen?（发生了何种非正常现象）

目前组件不支持data-，aria-，role的属性

[paranoidjk]

需要讨论下，有些组件可能不适合加

https://github.com/ant-design/ant-design-mobile/blob/master/components/_util/getDataAttr.tsx

[paranoidjk]

react-component/checkbox#33

[paranoidjk]

@handoudou Flex 是布局组件，我的观点是他不应该加很多业务属性，你可以把你的 data 这些放在 children 自己的容器元素上？

cc @warmhug @pingan1927

[silentcloud]

这个 issue 还得 reopen，目前有很多组件还不支持 aria- 和 role，比如 checkbox aria-label 等 @paranoidjk

[paranoidjk]

@silentcloud

• 还是之前说的，有些适合加，有些不适合，Flex 这里我只是把restProps传下去了，没加对data- 的处理
• 随时发现随时改吧。

[silentcloud]

那也行，这里那就先关掉吧，后面自查好了

[cncolder]

直接把 restProps 传下去会引发意想不到的问题，比如 ant-design/ant-design#2258

Warning: Unknown prop `warning` on <div> tag. Remove this prop from the element.
For details, see https://fb.me/react-unknown-prop

初看这个问题可能认为是用户使用不当，不该传入 div 不支持的属性 warning，实则不然。比如在使用 styled-components 时，这个 HOC 组件只是给包装的组件添加一个 className 并且把所有 props 向下传递。

const Result = styled(Flex.Item)`
  color: ${({ warning }) => warning ? 'red' : 'gray'};
`

render () {
  return(
    <Result warning={!!this.state.error}>abc</Result>
  )
}

[paranoidjk]

@cncolder 我感觉这是 styled-components 的问题，不然难道 antd-mobile 所有 component 在最下层要去做剔除不合法 props 的事情？

[cncolder]

@paranoidjk styled-components 只是一个例子，HOC 组件都是把自己的属性提取出来，其他属性向下传的。

这个先保持现状吧，是我理解错了，刚看了一下 antd 和 mdl，他们也没做处理直接向下传给 DOM。

所以要想支持 data-，只有过滤出来。因为 Flex.Item 下一级就是 div，传入的属性是否合法要由组件来考虑，因为用户是把属性传给 Flex.Item 的，这些属性原样传给了 div，这是用户意想不到的。

[pingan1927]

标准属性长期还是需要支持的，按这个标准来吧： https://facebook.github.io/react/docs/dom-elements.html#all-supported-html-attributes

[ziluo]

@likezero 在这里统一再梳理下吧