使用TailwindCSS+Vite开发组件时遇props.handleSelect不是函数错误

问题根源 #

你在父组件Navbar中向Menu2传递的函数属性名为onSelect，但在子组件Menu2里却尝试调用props.handleSelect，两者名称不匹配，导致找不到对应的函数，触发类型错误。

解决方案（二选一即可） #

方案1：修改子组件，使用正确的属性名 #

将Menu2中调用函数的地方从props.handleSelect改为props.onSelect，和父组件传递的属性名保持一致：

const Menu2 = (props) => {
  const [click, setClick] = useState(false);

  return (
    <div>
      <button
        name={props.name}
        id={props.id}
        required={props.required}
        value={props.value}
        onClick={() => {
          setClick(!click);
        }}
        onChange={props.onChange}
        className={
          `${props.className} ` +
          ` flex min-w-[100px] flex-row items-center  justify-between rounded font-semibold ${click ? "bg-primary-700" : "bg-none"} border-primary-700 hover:bg-primary-700 border-[2px] pl-[10px]`
        }
      >
        {props.placeholder}
        {click == true ? (
          <img
            src={upIcon}
            style={{ marginTop: "2px", margin: "9px" }}
            height="10px"
            width="20px"
          ></img>
        ) : (
          <img
            src={downIcon}
            style={{ marginTop: "2px", margin: "9px" }}
            height="10px"
            width="20px"
          ></img>
        )}
      </button>

      <div
        className={`${click == true ? "" : "hidden"}  animate-ease-out shadow-primary-700 absolute min-h-[40px] min-w-[100px] max-w-[200px] rounded bg-white text-black shadow-md`}
      >
        {props.options?.map((options) => {
          return (
            <div
              className="hover:bg-primary-700 p-[10px] hover:text-white "
              key={options}
              onClick={() => {
                // 修正为匹配的属性名
                props.onSelect(options);
                // 可选：点击后收起菜单
                setClick(false);
              }}
            >
              {options}
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Menu2;

方案2：修改父组件，传递匹配的属性名 #

如果想保持子组件里的props.handleSelect调用，那么在Navbar中传递属性时改为handleSelect={handleSelect}：

const Navbar = () => {
  const handleSelect = (option) => {
    option == "Home"
      ? console.log(option)
      : option == "View Submissions"
      ? console.log(option)
      : console.log(option);
  };

  return (
    <div
      className={`bg-primary-700 flex min-h-[50px] min-w-[100vh] flex-row items-center justify-between p-[5px] text-white `}
    >
      <div
        onClick={() => {
          navigate("/home");
        }}
        className={`pl-[20px] font-semibold hover:cursor-pointer`}
      >
        MICROTEK
      </div>
      <div className={`mr-[10px] flex flex-row`}>
        <Menu2
          placeholder="Navigate"
          options={["View Submissions", "Home"]}
          // 修改为匹配子组件的属性名
          handleSelect={handleSelect}
        ></Menu2>
      </div>
    </div>
  );
};

额外建议 #

推荐使用方案1，因为onXXX是React组件事件的标准命名方式（比如onClick、onChange），更符合社区规范，代码可读性更高。同时可以在点击菜单选项后调用setClick(false)收起下拉菜单，提升用户体验。

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