在React组件中嵌套HTML时出现dangerouslySetInnerHTML错误

Question

我正在使用一个提供名为InputPassword的组件的库，该组件返回input区域。

我需要在<label>块的下方放置一个<input>块，以便某些动画可以正常工作。到目前为止，我已通过以下方式实现了这一目标：

<InputPassword className="input__field input__field--kohana password">
    <label className="input__label input__label--kohana">
        <i className={"fa fa-fw icon icon--kohana fa-lock" }></i>
        <span className="input__label-content input__label-content--kohana">Password</span>
    </label>
</InputPassword>

像魅力一样！

但是，我的控制台在每个按键时都会抱怨以下消息： Warning: input is a void element tag and must not have 'children' or use 'props.dangerouslySetInnerHTML'. Check the render method of InputPassword.

如何避免此错误？

简单地以这种方式重写并不能解决问题：

<InputPassword className="input__field input__field--kohana password" />
<label className="input__label input__label--kohana">
    <i className={"fa fa-fw icon icon--kohana fa-lock" }></i>
    <span className="input__label-content input__label-content--kohana">Password</span>
</label>