React中input标签写法错误导致页面无法加载的原因咨询

核心原因很直接：<input>是HTML标准里的空元素（void element），这类元素不允许包含任何子内容，React编译JSX时会严格校验这一点，一旦违反就会触发渲染错误，导致页面空白。

具体拆解：

• HTML规范限制：像<input>、<img>、<br>这类空元素，天生就没有闭合标签的用法，它们的作用就是单独存在，不能包裹文本或其他元素。你写<input>Enter your Name</input>，相当于给空元素硬塞子内容，本身就不符合HTML规则。
• JSX编译逻辑：JSX最终会被转成React.createElement调用。自闭合<input />编译后是React.createElement('input', 配置属性)；但如果写<input>文本</input>，编译时会把“文本”作为子节点参数传入，React检测到<input>这种空元素存在子节点，直接抛出错误，组件渲染失败，页面自然就崩了。
• 你的代码问题：被注释的那段代码里，你把提示文本Enter your Name放在了<input>的开始和结束标签之间，这就属于违规添加子内容，触发了React的错误校验。而自闭合写法里，提示文本是放在<input>外面的兄弟节点，完全符合规则，所以能正常运行。

错误写法示例（触发崩溃）： #

<input type="text" className={'form-control'} value={info.name} onChange={event => set_info({name: event.target.value})}> Enter your Name </input>

正确写法示例（正常运行）： #

<input type="text" className={'form-control'} value={info.name} onChange={event => set_info({name: event.target.value})} /> Enter your Name

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