ReactJS中如何将Input的type属性从text动态切换为select？

错误根因 #

你当前的写法无论type取值如何，都会将option渲染逻辑作为子元素传入Input组件。当type为text时，Input内部渲染的是原生空元素<input />，哪怕你通过条件判断返回空内容，只要Input组件接收到了children属性，内部直接将children挂载到<input />标签下，就会触发空元素不能有子节点的原生DOM错误。

修复方案 #

方案1：动态控制children属性（代码复用度高） #

通过对象展开运算符显式控制是否传入children属性，只有当type为fixed时才传递option子元素，否则不传该属性，从根源上避免空元素收到子节点：

<Controller
  control={control}
  name='part'
  render={({ field }) => (
    <Input
      type={type === "fixed" ? "select" : "text"}
      name="part"
      className={errors.part && "is-invalid"}
      value={field.value || ""}
      onChange={(value) => field.onChange(value)}
      {/* 仅type为fixed时传入children属性 */}
      {...(type === "fixed" ? {
        children: partnOptions.map((opt) => (
          <option value={opt.code} key={opt.code}>{opt.code}</option>
        ))
      } : {})}
    />
  )}
/>

方案2：条件拆分渲染（逻辑更直观） #

直接根据type值分开渲染两个不同的Input实例，无需处理动态传参的隐式问题，后续维护修改各自属性时更不容易出错：

<Controller
  control={control}
  name='part'
  render={({ field }) => (
    type === "fixed" ? (
      <Input
        type="select"
        name="part"
        className={errors.part && "is-invalid"}
        value={field.value || ""}
        onChange={(value) => field.onChange(value)}
      >
        {partnOptions.map((opt) => (
          <option value={opt.code} key={opt.code}>{opt.code}</option>
        ))}
      </Input>
    ) : (
      <Input
        type="text"
        name="part"
        className={errors.part && "is-invalid"}
        value={field.value || ""}
        onChange={(value) => field.onChange(value)}
      />
    )
  )}
/>

内容的提问来源于stack exchange，提问作者tickwave