这种把单选按钮意外渲染成复选框的情况我之前也碰到过，结合你的描述（文本字段正常、values无空值），大概率是组件配置或者表格的渲染逻辑出了问题，咱们一步步来排查解决：

• 检查RadioButtonRender的核心配置
  这是最常见的问题点：

  1. 确认组件内的input标签type属性是否明确设为radio，别不小心写成type="checkbox"了——这是最容易犯的低级错误；
  2. 同一组的单选按钮必须共享相同的name属性！如果每个单选按钮的name都是独立值，浏览器会把它们当成互不关联的复选框处理。比如你循环渲染values时，要给所有同组的radio设置统一的name，比如name="table-radio-group"。

• 排查表格组件的渲染干扰
  有些UI库的表格组件会对单元格内的表单元素做默认处理，可能无意中篡改了元素类型：

  1. 先单独在表格外渲染RadioButtonRender组件，看它是否正常显示为单选按钮。如果单独渲染没问题，那就是表格单元格的渲染逻辑有冲突，需要调整表格的配置（比如禁用表单元素的自动转换）；
  2. 用浏览器开发者工具检查元素：选中那个“复选框”，看它的实际type属性是不是radio，再查看computed样式里有没有第三方CSS或全局样式把radio的外观改成了复选框。

• 确认组件传参的正确性
  虽然你说values无空值，但还是要核对传给RadioButtonRender的参数：比如是否正确传递了分组名称、选中状态等必要props。举个正确的组件实现示例：

// 正确的RadioButtonRender组件示例
function RadioButtonRender({ optionValue, groupName, isChecked, onSelect }) {
  return (
    <label className="radio-label">
      <input
        type="radio"
        name={groupName}
        value={optionValue}
        checked={isChecked}
        onChange={(e) => onSelect(e.target.value)}
      />
      {optionValue}
    </label>
  );
}

在表格中使用时，确保同一列的单选按钮共享同一个groupName：

// 表格单元格中的调用示例
<TableDataCell>
  <RadioButtonRender
    optionValue={row.data}
    groupName="table-row-selection"
    isChecked={selectedRowId === row.id}
    onSelect={handleRowSelection}
  />
</TableDataCell>

按照上面的步骤排查，应该能快速定位到问题所在，把复选框变回单选按钮~

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