React类组件鼠标悬停显示Props签名的实现方法咨询

这完全可行，主要通过TypeScript类型定义或者PropTypes配合VSCode插件实现，以下是具体示例：

方案一：TypeScript（推荐） #

通过给类组件指定Props类型泛型，VSCode会自动识别并在鼠标悬停时显示完整的Props签名：

import React from 'react';

// 1. 定义组件Props的类型接口
interface UserCardProps {
  /** 用户姓名 */
  name: string;
  /** 用户年龄，可选 */
  age?: number;
  /** 点击卡片的回调函数 */
  onCardClick: () => void;
}

// 2. 类组件继承React.Component时传入Props泛型
class UserCard extends React.Component<UserCardProps> {
  render() {
    const { name, age, onCardClick } = this.props;
    return (
      <div onClick={onCardClick} style={{ padding: '1rem', border: '1px solid #ccc' }}>
        <h3>{name}</h3>
        {age && <p>年龄：{age}</p>}
      </div>
    );
  }
}

// 使用组件时，鼠标悬停<UserCard>或props参数就能看到签名详情
function App() {
  return <UserCard name="Alice" onCardClick={() => alert('点击了卡片')} />;
}

此时在VSCode中鼠标悬停UserCard组件、this.props或者使用组件时的props属性，都会显示完整的Props类型、注释和可选标记。

方案二：PropTypes + VSCode插件 #

如果使用JavaScript开发，可以通过PropTypes定义Props规则，再安装VSCode插件React PropTypes IntelliSense来实现悬停提示：

import React from 'react';
import PropTypes from 'prop-types';

class UserCard extends React.Component {
  render() {
    const { name, age, onCardClick } = this.props;
    return (
      <div onClick={onCardClick} style={{ padding: '1rem', border: '1px solid #ccc' }}>
        <h3>{name}</h3>
        {age && <p>年龄：{age}</p>}
      </div>
    );
  }
}

// 定义PropTypes规则
UserCard.propTypes = {
  /** 用户姓名 */
  name: PropTypes.string.isRequired,
  /** 用户年龄，可选 */
  age: PropTypes.number,
  /** 点击卡片的回调函数 */
  onCardClick: PropTypes.func.isRequired,
};

// 使用组件时，安装插件后鼠标悬停即可看到提示
function App() {
  return <UserCard name="Bob" onCardClick={() => alert('点击了卡片')} />;
}

安装上述插件后，VSCode会读取propTypes定义的规则，在鼠标悬停时显示Props的类型、是否必填和注释信息。

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