React+Redux项目index.js报input为void元素标签错误如何修复

错误原因说明 #

你遇到的*Error: input is a void element tag and must neither have children nor use dangerouslySetInnerHTML*报错，本质和你贴的index.js代码无关，你提供的index.js代码逻辑完全正确。
React报错定位指向ReactDOM.render调用处是框架错误栈的常见情况：根渲染入口是组件树的挂载起点，子组件运行时报错如果没有被组件内部捕获，错误栈最终会关联到根render位置。

该错误的核心触发逻辑是：你项目中某个位置写了包含子内容/子元素的<input>标签。input属于HTML空元素（void element），天生不支持包含任何子内容，也不能使用dangerouslySetInnerHTML属性，只能写成自闭合形式<input />。

修复排查步骤 #

• 全局搜索项目内所有<input>相关的代码，排查以下错误写法：
  • 非自闭合的input，比如<input>输入内容</input>，这类写法需要把input外的文本移到标签外部，搭配label使用即可：

    {/* 错误写法 */}
    <input name="account">账号</input>
    
    {/* 正确写法 */}
    <label>
      账号
      <input name="account" />
    </label>
    

  • 封装自定义input组件时，误将children属性传入原生input，比如：

    {/* 错误写法 */}
    const CusInput = (props) => {
      return <input {...props} /> // 如果调用CusInput时传入了子内容，children会被一起传给原生input触发报错
    }
    
    {/* 正确写法 */}
    const CusInput = ({children, ...restProps}) => {
      return (
        <div className="input-wrap">
          {children}
          <input {...restProps} />
        </div>
      )
    }
    

• 排查修改完成后重新启动项目即可消除报错。

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