带有 typescript 的 EmailJS 给出 ref 类型错误 - 预期类型来自属性 \'ref\'答案

【问题标题】：EmailJS with typescript giving ref type error - expected type comes from property 'ref'带有 typescript 的 EmailJS 给出 ref 类型错误 - 预期类型来自属性 \'ref\'
【发布时间】：2022-10-23 23:25:56
【问题描述】：

我正在使用 react typescript 和 EmailJS 作为表单。我已复制文档代码，但出现 ref 类型错误。下面是代码，然后我显示了错误。

ref={form} 给出了错误。这和状态声明可能是与错误相关的唯一行。

import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';

export const ContactUs = () => {
  const form = useRef();

  const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY')
      .then((result: { text: any }) => {
          console.log(result.text);
      }, (error: { text: any }) => {
          console.log(error.text);
      });
  };

  return (
    <form ref={form} onSubmit={sendEmail}>
      <label>Name</label>
      <input type="text" name="user_name" />
      <input type="submit" value="Send" />
    </form>
  );
};

(属性) React.ClassAttributes.ref?: React.LegacyRef |不明确的

类型“MutableRefObject”不可分配给类型“LegacyRef |不明确的'。类型“MutableRefObject”不可分配给类型“RefObject”。属性“当前”的类型不兼容。类型“未定义”不可分配给类型“HTMLFormElement |空'.ts(2322)

index.d.ts(137, 9)：预期类型来自属性 'ref'，它在此处声明类型为 'DetailedHTMLProps<FormHTMLAttributes, HTMLFormElement>'

【问题讨论】：

标签： reactjs typescript use-ref

【解决方案1】：

像这样创建ref：

const form = useRef(null) // add null here

如果没有解决，请检查@types/react 是否存在冲突版本。 React 18 具有重大更改，可能会与尚未更新的第三方库生成 TS 错误。

【讨论】：

非常感谢它的工作！每当我使用 ref 时，我是否应该始终将默认值设置为 null？还是取决于参考的类型？
甜的！这是有条件的，因为有时您必须指定您正在创建的ref 的类型（例如useRef<HTMLButtonElement>(null) 可能不起作用），但添加null 是一个很好的经验法则，是的。

【解决方案2】：

将 null 作为参数传递时我仍然遇到问题。 form.current 仍然抛出这个错误：

"Argument of type 'null' is not assignable to parameter of type 'string | HTMLFormElement'.ts(2345)"

我已经尝试过各种变体，例如：

const form = useRef<HTMLFormElement>(null);

const form = useRef<HTMLFormElement | null>(null);

const form = useRef<HTMLFormElement | string>(null);

但似乎没有任何效果。

export default function Contact({ closePopup }) {
    const form = useRef(null);

    const sendEmail = (e): void => {
        e.preventDefault();

        emailjs
            .sendForm(
                keys.REACT_APP_SERVICE_ID,
                keys.REACT_APP_TEMPLATE_ID,
                form.current,
                keys.REACT_APP_PUBLIC_KEY
            )
            .then(
                (result: { text: any }) => {
                    console.log(result.text);
                    e.target.reset();
                    console.log("MESSAGE SENT");
                },
                (error: { text: any }) => {
                    console.log(error.text);

                    console.log("MESSAGE FAILED TO SENT");
                }
            );
    };
    return (
        <div className="contactWrapper">
            <img
                onClick={closePopup}
                id="closeProjects"
                src="img/closeIcon.png"
                alt="Close"
            />
            <h1 className="contactHeading">CONTACT ME</h1>
            {/* <div id="trenner"></div> */}
            <form className="contactForm" ref={form} onSubmit={sendEmail}>
                <label>Name</label>
                <input type="text" name="user_name" />
                <label>Email</label>
                <input type="email" name="user_email" />
                <label>Message</label>
                <textarea name="message" />
                <input id="sendButton" type="submit" value="LIFT OF" />
            </form>
        </div>
    );
}

【讨论】：