React函数组件出现Cannot find name 'render'.ts(2304)错误求助

你写的是函数组件，但错误混用了类组件的语法：

• render() 是类组件专属的方法，函数组件不需要这个，直接返回JSX即可
• 函数组件里没有this，所以this.state、this.setState、this.props这些写法全部无效

1. 用React的useState钩子替换类组件的state管理
2. 删除多余的render()方法，直接把JSX作为函数的返回内容
3. 去掉所有this.前缀，直接使用定义的变量和函数
4. 给组件添加TypeScript的props类型定义（规范写法）

import React, { useState } from "react";
import HoverButtons from "./HoverButtons";

const evStop = (ev: React.MouseEvent) => {
  ev.preventDefault(); 
  ev.stopPropagation(); 
  ev.nativeEvent.stopImmediatePropagation(); 
};

// 定义props类型
type HoverMenusProps = {
  flashFn: (msg: string) => void;
};

function HoverMenus({ flashFn }: HoverMenusProps) {
  // 用useState管理状态
  const [hiddenPopupMenu, setHiddenPopupMenu] = useState(true);
  
  const toggle = () => {
    setHiddenPopupMenu(!hiddenPopupMenu);
  };
  
  const clkBtn = (ev: React.MouseEvent, msg: string) => {
    evStop(ev);
    flashFn(msg);
  };

  // 直接返回JSX，不用render方法
  const p = {
    funcs: {
      interested: (e: React.MouseEvent) => clkBtn(e, "interested"),
    }
  };
  
  return (
    <div className="whenhovered" onClick={toggle}>
      {hiddenPopupMenu && (
        <div>
          <div className="mt-5 pt-5" />
          <div className="mt-5" />
          <HoverButtons
            txt="LIKE"
            icon="thumbs-up"
            clicked={p.funcs.interested}
          />
        </div>
      )}
    </div>
  );
}

export default HoverMenus;

• 导入useState钩子来管理组件状态，代替类组件的this.state和this.setState
• 解构props参数，直接使用flashFn，不用this.props.flashFn
• 移除了render()方法，函数组件的返回值就是渲染的内容
• 给事件参数添加了更精确的类型（React.MouseEvent），替代模糊的any
• 定义了HoverMenusProps类型，让TypeScript能检查props的正确性

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