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

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

未捕获的不变违规：输入是一个 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} />

这是文档链接