包含在链接中的自定义 HTML 按钮不起作用

Question

我制作了一个自定义的Button 组件，它返回 HTML button。现在我在Link 中使用这个Button 来自next-routes。问题是它不能以这种方式工作。奇怪的是，如果我在Link 中使用 HTML button，则该按钮可以正常工作。但是，两个按钮都以完全相同的方式在 DOM 中呈现。以下是代码：

// Button.js

import React from "react";
import classNames from "classnames";

const Button = ({
    children,
    newClass = "",
    onClickHandler = () => { },
    isSubmitting = false,
    inlineBtn = true,
    disabled,
    primary,
    secondary,
    basic,
    notCentered = true,
    shaded,
    miniLoader,
    type = "button",
    isTransparent,
    fontClass = "",
    small
}) => {
    return (
        <React.Fragment>
            <button
                className={classNames(
                    `${isTransparent ? 'btn-transparent' : 'btn'} ${fontClass} ${newClass}`,
                    {
                        "btn-block": !inlineBtn,
                        "col-mx-auto": !notCentered,
                        "btn-primary": primary,
                        "btn-secondary": secondary,
                        "btn-basic": basic,
                        shaded: shaded,
                        loading: isSubmitting,
                        "loading-sm": miniLoader,
                        "btn-sm": small
                    }
                )}
                disabled={disabled}
                type={type}
                onClick={onClickHandler}
            >
                <span>{children}</span>
            </button>
        </React.Fragment>
    );
};

export { Button };

以下不起作用：

<Link route="/register/location">
  <Button basic small>
    Sign Up
  </Button>
</Link>

以下工作正常：

<Link route="/register/location">
  <button className="btn btn-basic btn-sm" type="button" onClick={() => { }}>
    <span>Sign Up</span>
  </button>
</Link>

Answer 1

您可以按如下方式更新您的Button 组件。

const Button = ({
  as = "button",
  children,
  newClass = "",
  onClickHandler = () => {},
  isSubmitting = false,
  inlineBtn = true,
  disabled,
  primary,
  secondary,
  basic,
  notCentered = true,
  shaded,
  miniLoader,
  type = "button",
  isTransparent,
  fontClass = "",
  small,
  ...rest
}) => {
  const Wrapper = as;
  return (
    <Wrapper
      className={classNames(
        `${isTransparent ? "btn-transparent" : "btn"} ${fontClass} ${newClass}`,
        {
          "btn-block": !inlineBtn,
          "col-mx-auto": !notCentered,
          "btn-primary": primary,
          "btn-secondary": secondary,
          "btn-basic": basic,
          shaded: shaded,
          loading: isSubmitting,
          "loading-sm": miniLoader,
          "btn-sm": small
        }
      )}
      disabled={disabled}
      type={type}
      onClick={onClickHandler}
      {...rest}
    >
      <span>{children}</span>
    </Wrapper>
  );
};

这将允许自定义Wrapper 用于您的Button 组件。我们将每个继承的道具传递给您的Wrapper，以便您的route 道具将在您的Link 组件中接收。

你可以这样使用它

<Button basic small as={Link} route="/register/location">
  Sign Up
</Button>

这使用 ES6 扩展运算符语法。基本上，您将Button 组件as 渲染为Link 组件，并且任何继承的道具都将传递给Link 组件，因此route 道具将传递给Link 组件。

这遵循类似于 Material-ui 的 spead 方法的 API 设计方法。这也将使您的组件更加灵活。