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

Question

我定制了 Button返回 HTML 的组件 button .现在我正在使用这个 Button内Link来自 next-routes .问题是它不能以这种方式工作。奇怪的是，如果我使用 HTML button 按钮可以正常工作内Link .但是，这两个按钮都以完全相同的方式在 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组件 as Link组件，并且任何继承的 Prop 都将传递给 Link组件，因此 route props 传入 Link成分。

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