JSX中name/id属性失效及移除htmlFor警告的技术咨询

我在使用JSX渲染表单时，一开始遇到name和id属性被忽略的问题，后来发现是el.value不存在导致的，修正后问题解决。但因为最终要导出HTML给用户，必须在<label>上使用for属性而非React要求的htmlFor，现在想知道怎么移除JSX中使用for属性时的错误提示。

附上我的JSX代码：

const formHtml = form.map((el) => {
let element = null
let classes = 'block'

if (el.element === 'select') {
  const optionTags = el.optionValues.map((el, index) => {
    return (
      <option value={el} key={index}>
        {el}
      </option>
    )
  })
  element = <select name={el.value}>{optionTags}</select>
} else {
  if (el.type === 'checkbox' || el.type === 'radio') {
    classes = 'block flex-hori'
  }

  if (el.element === 'input') {
    element = <input name={el.value} id={el.value} type={el.type}></input>
  } else {
    element = <el.element name={el.name} id={el.value}></el.element>
  }
}

return (
  <div className={classes} key={el.id}>
    <label for={el.label}>{el.label}</label>
    {element}
  </div>
)
 })

针对移除for属性的警告，有两种常用方式：

1. 单行禁用ESLint警告 #

在使用for属性的<label>标签上方添加ESLint禁用注释，仅针对当前行生效，不会影响其他代码的检查：

return (
  <div className={classes} key={el.id}>
    {/* eslint-disable-next-line react/jsx-no-unknown-property */}
    <label for={el.label}>{el.label}</label>
    {element}
  </div>
)

2. 全局配置ESLint允许for属性 #

如果项目中有大量需要使用for属性的场景，可以在ESLint配置文件（如.eslintrc.js）中修改规则，全局允许for作为合法属性：

module.exports = {
  // 其他配置项...
  rules: {
    "react/jsx-no-unknown-property": ["error", { "ignore": ["for"] }]
  }
}

注意：这种方式会关闭所有对for属性的警告，仅推荐在全局需求场景下使用。

补充说明：其实React在渲染DOM时，会自动将htmlFor转换为HTML原生的for属性。如果你的导出流程是基于React渲染后的DOM转字符串，也可以直接使用htmlFor，最终导出的HTML依然会是for属性，这样就能避免警告。

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