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

【问题标题】：ReactJs: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`ReactJs：输入是一个空元素标签，既不能有`children`也不能使用`dangerouslySetInnerHTML`
【发布时间】：2020-10-23 22:28:50
【问题描述】：

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

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

Uncaught Invariant Violation：输入是一个空元素标签，必须既没有children，也没有使用dangerouslySetInnerHTML。

组件出现上述错误

【问题讨论】：

您不能在输入标签内添加 div。输入标签必须是自闭合标签。所以像<input type={inputTypes} onChange={onChangHandler} onBlur={onBlurHandler} /> 一样使用它。并删除闭合输入标签</input> .. 参考： stackoverflow.com/a/36527825/7785337

标签： javascript html reactjs input

【解决方案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} />

这里是docs link

【讨论】：

【解决方案2】：

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

<area />、<br /> 和 <input /> 等 HTML 元素是 void 元素，它们只会自动关闭而没有任何内容。

因此，如果您为 void 元素设置 children 或 dangerouslySetInnerHTML 属性，React 将抛出异常。

【讨论】：