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

Question

我制作了一个返回 HTML button 的自定义 Button 组件。现在我在 next-routes 的 Link 中使用这个 Button。问题是它不能以这种方式工作。奇怪的是，如果我在 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 组件。我们将每个继承的 Prop 传递到您的 Wrapper 中，以便您的 route Prop 将在您的 Link 组件中接收。

然后你就可以像这样使用它

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

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

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