React函数组件无法接收refs报错：通用按钮组件修复咨询

报错原因 #

你给函数组件AlknButton传递了ref，但默认函数组件没有实例对象，无法直接接收ref，必须通过React.forwardRef()将ref转发到组件内部的原生<button>元素上。

修复步骤 #

• 用React.forwardRef()包裹组件定义，它会接收props和ref两个参数
• 将接收到的ref绑定到内部的<button>标签上

修复后完整代码 #

import React, { forwardRef } from "react";
import AlknLoading from "./AlknLoading";

export default forwardRef(({
  type,
  className,
  loadingstyle,
  loading,
  placeholder,
  children,
  ...props
}, ref) => {
  let settype = "";
  switch (type) {
    case "primary":
      settype = "AlknPrimaryBtn";
      break;

    case "secondary":
      settype = "AlknSecondaryBtn";
      break;

    case "AlknKoyuGri":
      settype = "AlknKoyuGriBtn";
      break;

    case "AlknAcikGri":
      settype = "AlknAcikGriBtn";
      break;

    case "AlknAcikSari":
      settype = "AlknAcikSariBtn";
      break;

    default:
      settype = "alkanlar-default-button";
  }

  // 处理className为空的情况，避免出现多余空格
  const btnClassName = `${settype}${className ? ` ${className}` : ''}`;

  return (
    <button {...props} className={btnClassName} ref={ref}>
      {loading ? (
        <AlknLoading className={loadingstyle} />
      ) : placeholder ? (
        <span>{placeholder}</span>
      ) : (
        children
      )}
    </button>
  );
});

额外优化提示 #

• 可以把type对应的类名做成映射对象，替代switch语句，让代码更简洁：

const typeClassMap = {
  primary: "AlknPrimaryBtn",
  secondary: "AlknSecondaryBtn",
  AlknKoyuGri: "AlknKoyuGriBtn",
  AlknAcikGri: "AlknAcikGriBtn",
  AlknAcikSari: "AlknAcikSariBtn",
};
const settype = typeClassMap[type] || "alkanlar-default-button";

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