ReactJs:input 是一个 void 元素标签，既不能有"child"，也不能使用"

Question

我在 react 中编写了一个可重用的输入类型 UI 组件，其中名称、描述等已根据使用位置动态更改

const InputType = props => {
const { inputName, inputTypes, descriptionInput, onChangHandler, onBlurHandler, iconName } = props;
return (
<div className="a-input a-input--large">
<label>{inputName}</label>
<div className="m-input-tip ">
<input type={inputTypes} onChange={onChangHandler} onBlur={onBlurHandler}>
<div className="a-tip">
{
isNotNullOrDefined(iconName, true) &&
<Icon />
}
<Icon className="a-icons--small" name={iconName} />
<span>{descriptionInput}</span>
</div>
</input>
</div>
<div className="validation">This is a required field</div>
</div>
);
}

但是当我尝试像这样简单地执行它时，

return (
<InputType
inputName="Type what you want to search"
inputTypes="text"
/>
);

我在控制台中收到这样的错误

未捕获的不变冲突：输入是 void 元素标记，必须 既没有children也没有使用dangerouslySetInnerHTML.

组件中发生上述错误

Answer 1

你在 html 中有一个错误：输入是自闭合标签，不能像你一样生孩子

<input type={inputTypes} onChange={onChangHandler} onBlur={onBlurHandler}>
{/* this is a mistake */}
<div className="a-tip">
{isNotNullOrDefined(iconName, true) && <Icon />}
<Icon className="a-icons--small" name={iconName} />
<span>{descriptionInput}</span>
</div>
</input>;

输入必须是自关闭的。

<input type={inputTypes} onChange={onChangHandler} onBlur={onBlurHandler} />

这是文档链接

Answer 2

当 void 元素具有子元素或危险的 SetInnerHTML 属性时，此规则适用。

HTML 元素如<area />、<br />和<input />是 void 元素，它们只是自闭合的，没有任何内容。

因此，如果你为 void 元素设置了子元素或危险的 SetInnerHTML prop，React 将抛出异常。