React结合emotion/styled开发复选框组件如何替换attrs写法

原来的styled.input.attrs({type: 'checkbox'})的唯一作用是给渲染出来的原生input元素强制绑定静态的type="checkbox"属性，没有动态计算逻辑，完全可以脱离.attrs实现等价效果，具体调整步骤如下：

1. 调整HiddenCheckbox组件的样式定义 #

直接去掉链式调用的.attrs方法，保留原有的隐藏样式即可：

export const HiddenCheckbox = styled.input`
    overflow: hidden;
    white-space: nowrap;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
`;

2. 匹配原组件的属性透传逻辑 #

有两种方案可以达到和原来完全一致的渲染结果，按需选择即可：

• 方案一：渲染时显式传入原生属性
  在使用HiddenCheckbox的位置，直接给组件传入原生input支持的type="checkbox"属性，Emotion会自动把属性透传到真实DOM节点：

  return (
      <CheckboxContainer checked={checked} onClick={handleCheckboxChange}>
        <HiddenCheckbox
          type="checkbox"
          onChange={handleCheckboxChange}
          checked={checked}
        />
        <StyledCheckbox checked={checked}>
          <Icon/>
        </StyledCheckbox>
        <Text checked={checked}>{children}</Text>
      </CheckboxContainer>
  );
  

• 方案二：保留组件默认绑定行为，无需重复传参
  如果希望和之前一样，不用每次使用HiddenCheckbox时都手动写type="checkbox"，可以通过React原生的defaultProps机制给组件设置默认值，效果和.attrs绑定静态属性完全等价：

  // 在HiddenCheckbox定义之后追加默认属性配置
  HiddenCheckbox.defaultProps = {
    type: 'checkbox'
  };
  

  配置后不管渲染时有没有手动传type值，最终生成的真实DOM都会自动带上type="checkbox"属性，不会影响复选框的原生选中状态、键盘交互、屏幕阅读器识别等原有行为。

注意事项 #

• 不要尝试通过CSS样式控制input的类型，CSS没有修改元素原生属性的能力，这种方式无法实现复选框的识别逻辑
• 上述两种方案生成的最终DOM结构、元素行为和原.attrs写法的效果无任何差异，不会影响自定义复选框的交互逻辑

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