React中Textarea组件设置的data-id属性无法被DOM识别渲染

该问题和浏览器原生data-*属性解析规则无关，问题100%出在自定义Textarea组件的实现、或传入的属性值本身，具体诱因按出现概率从高到低排列：

• 组件内部属性透传逻辑单独拦截了data-id字段：绝大多数自定义表单组件封装时，会提取data-id作为组件内部的唯一标识，用于关联label、定位表单项做校验、埋点上报等场景，如果提取字段后没有把data-id放回待透传的属性对象，这个属性就不会出现在最终渲染的原生DOM节点上。你当前其他data-*属性都能正常渲染，说明整体透传链路是通的，该场景的概率最高。
• 组件的属性过滤规则误命中data-id：部分组件为了避免无关属性透传到DOM触发React警告，会写属性黑名单/白名单做过滤，如果过滤规则存在缺陷（比如正则匹配所有带id后缀的属性做特殊处理），就会意外拦截data-id。
• 传入的dataId值为会被React忽略的假值：如果dataId变量的实际值是undefined、null、false，React渲染时会直接跳过该属性，不会挂载到DOM节点上。

1. 先在传入属性前单独打印dataId的值，确认它不是undefined/null/false这类会被React忽略的空值。
2. 打开自定义Textarea组件的源码，定位到原生<textarea>标签的渲染位置：
   • 检查是否对attributes参数做了解构，单独提取了data-id字段挪作他用，没有随其他属性一起透传
   • 检查属性过滤逻辑，确认data-id不在被拦截的属性列表里
   • 快速验证：直接在原生textarea标签上硬编码写死data-id="test-dev"，刷新页面看DOM上是否出现该属性，如果能正常出现，就能确定是属性透传逻辑的问题。

典型的错误写法参考（会导致data-id丢失）：

const Textarea = ({ value, onChangeHandler, readOnly, disabled, attributes }) => {
  // 单独解构取出data-id作为内部标识使用，没有放回透传属性中
  const { "data-id": componentUniqueId, ...restAttributes } = attributes;

  return (
    <textarea
      className="textarea_textarea"
      value={value}
      onChange={onChangeHandler}
      readOnly={readOnly}
      disabled={disabled}
      {/* 仅透传了剔除data-id后的剩余属性，data-id自然不会出现在DOM上 */}
      {...restAttributes}
    />
  )
}

内容的提问来源于stack exchange，提问作者Mario Nezmah