ReactJs：输入是一个空元素标签，不能有`children`也不能使用`dangerouslySetInnerHTML`。

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"
  />
);

控制台中出现了以下错误：

未捕获的不变式违规：输入是无内容元素标签，既不能有children也不能使用dangerouslySetInnerHTML。

上述错误发生在组件中。

- Dinuli Thalakumbura

---

在input标签内不能添加div元素。input标签需要是一个自闭合标签。所以使用它的方式应该是<input type={inputTypes} onChange={onChangHandler} onBlur={onBlurHandler} />，并且移除闭合的input标签</input>。参考链接：https://stackoverflow.com/a/36527825/7785337 - undefined

Answer 1

您的html代码存在错误：input标签是自闭合标签，不能像您这样拥有子元素。

<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} />

这里是文档链接，与it技术相关。

- Rostyslav

Answer 2

当空元素有子元素或者dangerouslySetInnerHTML属性时，该规则适用。

像<area />、<br />和<input />这样的HTML元素是只有自我关闭而没有任何内容的空元素。

因此，如果您为一个空元素设置了子元素或dangerouslySetInnerHTML属性，React将抛出异常。

- user12876817