面临错误:输入是一个void元素标记，既不能有"children"，也不能使用"dange

Question

我正在学习ReactJS。我正在React中创建一个简单的表单。这是我的登录组件：

function Login() {
return (
<div className="card login-container">
<form id="login">
<label><input name="email" className="email" placeholder="Email" type="text"></input></label>
<label><input name="password" className="password" placeholder="Password" type="password"></input></label>
<label><input type="submit" className="btn btn-submit">Submit</input></label>
</form>
</div>
)
}

我收到这个错误：

错误：输入是一个void元素标记，既不能有children也不能使用dangerouslySetInnerHTML。

我在StackOverflow上找到了几个解决方案。我明白了我不应该控制孩子。因此，我将我的输入封装在中。另外，我做了形式控制思维React可能不允许不受控制的形式。尽管如此，它还是显示了同样的错误。我做错了什么？

谢谢：(

Answer 1

就像错误状态一样，input是一个void元素，因此它不能包含任何嵌套元素。

此外，向input[type=submit]元素提供显示文本的方法是使用该元素的value属性。

function Login() {
return (
<div className="card login-container">
<form id="login">
<label><input name="email" className="email" placeholder="Email" type="text" /></label>
<label><input name="password" className="password" placeholder="Password" type="password" /></label>
<label><input type="submit" className="btn btn-submit" value="Submit" /></label>
</form>
</div>
);
}

请注意，这不仅仅是一个reactjs相关的问题。是的，在这种特殊情况下，react会警告您犯了错误，但通常将元素封装/嵌套到void元素中会使HTML无效。因此，这更多的是一个HTML/语义问题。