React:`input is a void element tag and must neither have children nor use dangerouslySetInnerHTML`问题解决方法

这篇文章讲述了一个解决方案，input is a void element tag and must neither have children nor use dangerouslySetInnerHTML 。

React抛出一个错误，当无效元素包含孩子或危险地使用SetInnerHTML时。

HTMl中的无效元素是指没有任何内容的自闭标签

这是开发人员在开发React应用程序时经常遇到的问题。

这个问题是什么意思？

例如，让我们在HTML中声明一个按钮，这在HTML中是可行的，但在语义上有问题，因为

<input type="submit">Save</input>

在React render jsx代码中，同一行会导致这些错误/警告，Input是自闭标签，并且在闭标签内没有子标签。所以它里面不允许保存标签。

以同样的方式，我们可以在react中改写如下

<input type="submit" value="Save"/>

不仅仅是输入标签，按钮在react中也是一个问题。

<button type="submit">Update</button>

上面的内容可以用value 属性来改写。

<button type="submit" value="Update"/>

例如，在输入文本类型中

正如你所看到的，Input标签包含div，这是不允许的，所以，react抛出警告


<input type=text onChange={changeEvent} >
  <div className="tooltip">
This is email text box 
 </div>
</input>;

相反，同样的东西可以被改写成下面的样子

<input type=text onChange={changeEvent} />;

结论

Reacts中的广告输入字段是自动关闭的元素，它们不能包含子内容或嵌套内容。

另外还解释了