创建历史记录 link 并利用我现有的 link 组件

Question

我有一个通用的 link 组件（一个原子，我正在使用原子设计来构建我的 React 应用程序），它 returns 只是一个 <span> 带有标题和箭头图标，或者当它确实有一个 url 时它 returns 一个 react-router-dom <Link>.

我正在使用 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 道具（函数）从 parent 传递到 child 是否是一种干净的方法，例如：

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 处理程序附加到 Link 组件时，您可能需要防止默认的 link 行为发生。使用点击处理程序时，您还需要向 Link 组件提供有效的 to 道具。

示例：

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 以有条件地呈现按钮、link 或跨度，具体取决于需要。

创建历史记录 link 并利用我现有的 link 组件

Creating a history back link and make use of my existing link component

reactjs

react-hooks

react-router-dom

react-component