TypeScript无法识别Ant Design输入框的iconRender属性问题求助

嘿，我之前刚踩过这个坑！你遇到的TypeScript报错，核心原因是你用错了Ant Design的组件：

基础的<Input type="password" />组件根本没有iconRender这个属性，只有专门的Input.Password组件才内置了密码显隐的相关配置，包括iconRender。

正确的实现方式 #

直接替换成Input.Password组件，你的代码就能正常工作，TypeScript也不会再报错了：

import { Input } from 'antd';
import { EyeTwoTone, EyeInvisibleOutlined } from '@ant-design/icons';

// ... 你的组件代码
<Input.Password 
  className={styles["password-input"]} 
  placeholder="Password" 
  iconRender={(visible) => visible ? <EyeTwoTone /> : <EyeInvisibleOutlined /> } 
/>

为什么会报错？ #

Ant Design的类型定义里，InputProps（基础Input的属性类型）确实没有iconRender字段，而Input.Password对应的PasswordProps才包含这个属性。TypeScript会严格校验属性是否存在于组件的类型定义中，所以直接给基础Input加这个属性就会触发报错。

额外小提示 #

如果你想要完全自定义密码显隐的逻辑，也可以用基础Input自己实现：

import { useState } from 'react';
import { Input } from 'antd';
import { EyeTwoTone, EyeInvisibleOutlined } from '@ant-design/icons';

const [visible, setVisible] = useState(false);

// ...
<Input
  type={visible ? 'text' : 'password'}
  className={styles["password-input"]}
  placeholder="Password"
  suffix={
    <span onClick={() => setVisible(!visible)} style={{ cursor: 'pointer' }}>
      {visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />}
    </span>
  }
/>

不过这种方式需要自己维护显隐状态，不如官方的Input.Password组件省心。

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