这是我的自定义按钮组件:
const variants = {
primary: "btn-primary",
secondary: "btn-secondary",
delete: "btn-red",
white: "btn-white",
none: "",
};
type IconProps =
| { startIcon: React.ReactElement; endIcon?: never }
| { endIcon: React.ReactElement; startIcon?: never }
| { endIcon?: undefined; startIcon?: undefined };
export type ButtonProps = React.ButtonHTMLAttributes<
HTMLButtonElement | HTMLAnchorElement
> & {
variant?: keyof typeof variants;
isLoading?: boolean;
asAnchor?: boolean;
} & IconProps;
export const Button = React.forwardRef<
HTMLButtonElement | HTMLAnchorElement,
ButtonProps
>(
(
{
type = "button",
className = "",
variant = "primary",
isLoading = false,
startIcon,
endIcon,
asAnchor,
...props
},
ref
) => {
return (
<>
{asAnchor ? (
<a
className={clsx(
className,
variants[variant],
"appearance-none",
props.disabled && "pointer-events-none opacity-90"
)}
{...props}
>
{!isLoading && startIcon}
{!isLoading && props.children}
{!isLoading && endIcon}
</a>
) : (
<button
type={type}
className={clsx(
className,
variants[variant],
"disabled:pointer-events-none disabled:opacity-60"
)}
{...props}
>
{isLoading && (
<span className="flex items-center justify-center space-x-2">
<Spinner />
<span>Loading</span>
</span>
)}
{!isLoading && startIcon}
{!isLoading && <>{props.children}</>}
{!isLoading && endIcon}
</button>
)}
</>
);
}
);
Button.displayName = "Button";
如果我想渲染
<a>
但使用按钮的样式,我可以将它与 next/link
一起使用,我将像这样使用它:
<Link passHref href="/login">
<Button className="text-xs" asAnchor>
Login
</Button>
</Link>
我收到控制台日志,例如:
Expected server HTML to contain a matching <svg> in <a>.
注释掉上面的链接可以消除错误,所以我确信问题出在我如何呈现链接上。
在
react 17
中很好,但在react 18
中,我遇到了这个错误。
我发现实际上是我的状态管理破坏了一切,尽管它已经运行了很长一段时间。
我使用
zustand
并且正在使用 persist
中间件。删除这个使得所有水合错误消失。