使用React时遇到input为void元素标签的未捕获错误如何解决

input 是HTML规范中的空元素（void element），不存在闭合标签，也不支持传入子内容、使用dangerouslySetInnerHTML属性，你代码中将input写作带闭合标签的格式，且在标签内部插入了文本，违反了React的语法校验规则，因此触发报错。

• 首先将input改为自闭合标签格式：<input />
• 如果你需要给输入框添加提示文字，将原本写在标签内部的文本放到placeholder属性中；如果需要和输入框关联的外部说明文本，使用<label>标签配合id和for属性绑定即可。

修正后的代码示例 #

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {/* 用placeholder放内置提示文本 */}
      <input placeholder="Start editing to see some magic happen!" />
    </div>
  );
}

如果需要外部关联标签的写法：

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <label htmlFor="editInput">Start editing to see some magic happen!</label>
      <input id="editInput" />
    </div>
  );
}

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