VSCode中React组件props方法无法跳转至定义的问题求助

不需要额外安装特定扩展，问题根源是React组件的props缺少类型声明，导致VSCode自带的JavaScript/TypeScript语言服务无法识别onAddMeetup的定义。可以通过以下两种方式解决：

方式1：用TypeScript声明props类型 #

将组件文件后缀改为.tsx，给props定义明确的接口：

import { useRef } from "react";
import Card from "../ui/Card";
import classes from "./NewMeetupForm.module.css";

// 定义props的类型接口，可根据实际需求完善meetupData的结构
interface NewMeetupFormProps {
  onAddMeetup: (meetupData: { [key: string]: any }) => void;
}

function NewMeetupForm(props: NewMeetupFormProps) {
  function submitHandler(event: React.FormEvent) {
    event.preventDefault();
    const meetupData = {}; // 假设此处已完善数据逻辑
    props.onAddMeetup(meetupData);
  }

  return (
    <Card>
      <form className={classes.form} onSubmit={submitHandler}>
      </form>
    </Card>
  );
}

export default NewMeetupForm;

方式2：用JSDoc注释声明props类型 #

如果不想切换到TypeScript，给组件添加JSDoc注释，让VSCode识别props结构：

import { useRef } from "react";
import Card from "../ui/Card";
import classes from "./NewMeetupForm.module.css";

/**
 * @param {Object} props
 * @param {function(Object): void} props.onAddMeetup - 新增聚会的回调函数
 */
function NewMeetupForm(props) {
  function submitHandler(event) {
    event.preventDefault();
    const meetupData = {}; // 假设此处已完善数据逻辑
    props.onAddMeetup(meetupData);
  }

  return (
    <Card>
      <form className={classes.form} onSubmit={submitHandler}>
      </form>
    </Card>
  );
}

export default NewMeetupForm;

额外优化建议 #

如果项目根目录没有jsconfig.json（JS项目）或tsconfig.json（TS项目），可以创建一个基础配置文件，帮助VSCode更好地识别项目结构：
jsconfig.json示例：

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ES6",
    "jsx": "react"
  },
  "include": ["src/**/*"]
}

完成上述操作后，VSCode就能正确识别onAddMeetup的定义，支持跳转和智能提示。

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