A类型A不适合使用Antdesign的打字稿中的B型分配

Question

大家好，我正在使用Ant Design在打字稿中编写此代码，我得到了这个问题（TS2322）。 我想使用“蚂蚁设计”中的“输入”，并将第一个值设置为null。之后，我要将其放入输入中会出现一些错误。有人知道如何解决这个问题吗？感谢您提前的帮助！ *仅供参考：我的ANTD版本是4.21.0，打字稿为4.7.2

import { Button, Col, Input, Row } from "antd";
import { useRef } from 'react';
import styles from './Signin.module.css';

export default function Signin() {
const emailRef = useRef<typeof Input>(null);
const passwordRef = useRef<typeof Input>(null);

  return <Row align="middle" className={styles.signin_row}>
    <Col span={24}>
      <Row className={styles.signin_contents}>
        <Col span={12}>
          <img src="/bg_signin.png" alt="Signin" className={styles.signin_bg}/>
        </Col>
        <Col span={12}>
          <div className={styles.signin_title}>My Books</div>
          <div className={styles.signin_subtitle}>Please Note Your Opinion</div>
          <div className={styles.signin_underline} />
          <div className={styles.email_title}>
            Email
            <span className={styles.required}> *</span>
          </div>
          <div className={styles.input_area}>
            <Input 
            placeholder="Email"
            autoComplete="email"
            name="email" className={styles.input}
            ref ={emailRef}/>
          </div>
          <div className={styles.password_title}>
            Password
            <span className={styles.required}> *</span>
          </div>
          <div className={styles.input_area}>
            <Input 
            type="password"
            autoComplete="current-password"
            name="password"
            className={styles.input}
            ref={passwordRef}/>
          </div>
          <div className={styles.button_area}>
            <Button size="large" className={styles.button}>Sign In</Button>
          </div>
        </Col>
      </Row>
    </Col>
  </Row>

}

添加：糟糕，我忘了输入错误消息所说的内容！

Answer 1

Typescript消息说明了为什么您的EmailRef类型不匹配输入参考类型类型：

类型'RefoBject＆lt; compoundedComponent＆gt;'不能分配给'ref＆lt; inputref＆gt; |未定义的

因此，我的线索是您应该将inputref用作emailref的通用类型：

const emailRef = useref＆lt; inputref＆gt;（）;

您可以在'antd docs中找到相似的示例。选项'代码示例：
https://ant.design/components/components/components/tput/#input.tput.textarea

import type { InputRef } from 'antd';

import { Button, Input, Space, Switch } from 'antd';
import React, { useRef, useState } from 'react';

const App: React.FC = () => {
  const inputRef = useRef<InputRef>(null);
  const [input, setInput] = useState(true);
....

const emailRef = useRef<InputRef | null>(null);

Answer 2

尝试：（ antd ver5 ~~）

const emailRef = useRef<InputRef | null>(null);