创建历史记录返回链接并利用我现有的链接组件

Question

我有一定的通用链接组件（一个原子，我正在使用原子设计来构建我的react应用程序），它要么只返回带有标题和箭头图标的＆lt; span＆gt; url 它返回一个react-router-dom ＆lt; link＆gt; 。

我正在使用React-Router-Dom V5。

import React from 'react';

import { Link } from 'react-router-dom';

import { Arrow} from 'app/icons';

import { Props } from './MyLink.types';

const MyLink = ({ variant = 'iconRight', text, url }: Props) => {
  const renderLinkBody = () => {
    return (
      <React.Fragment>
        <span css={styles.label}>{text}</span>
        <Arrow />
      </React.Fragment>
    );
  };

  return url !== undefined ? (
    <Link to={url} title={text} >
      {renderLinkBody()}
    </Link>
  ) : (
    <span>{renderLinkBody()}</span>
  );
};

export default MyLink;

现在，我想使用此组件来创建一个返回按钮（类似于浏览器返回按钮的行为）。

这是一种干净的方法，将OnClick Prop（功能）从父母到孩子，

const history = useHistory();

<MyLink text="My title" variant="iconLeft" onClick={history.goBack} />

然后将MyLink组件调整一点：

 return url !== undefined || onClick ? (
    <Link to={url} title={text} onClick={onClick} >
      {renderLinkBody()}
    </Link>
  ) : (
    <span>{renderLinkBody()}</span>
  );

Answer 1

我认为这种方法还不错。将 onclick 处理程序附加到链接组件时，您可能需要防止默认链接行为发生。使用单击处理程序时，您还需要将有效的向 prop提供给链接组件。

示例：

const MyLink = ({ variant = "iconRight", onClick, text, url }) => {
  const clickHandler = e => {
    if (onClick) {
      e.preventDefault();
      onClick();
    }
  };

  const renderLinkBody = () => {
    return (
      <>
        <span css={styles.label}>{text}</span>
        <Arrow />
      </>
    );
  };

  return url !== undefined || onClick ? (
    <Link to={url || "/"} title={text} onClick={clickHandler} >
      {renderLinkBody()}
    </Link>
  ) : (
    <span>{renderLinkBody()}</span>
  );
};

由于 onclick 和 link 操作的问题，并且重构 myLink 根据需求有条件地渲染按钮，链接或跨度。