使用 Tag 在 NavLink Reactstrap 组件内传递属性

有人可以帮我弄清楚在 NavLink 组件中传递 Link 标签的意义是什么：

<NavLink tag={Link} to="/components/" activeClassName="active">Components</NavLink>

NavLink（reactstrap 组件）的代码如下：

import PropTypes from 'prop-types';
import classNames from 'classnames';
import { mapToCssModules, tagPropType } from './utils';

const propTypes = {
  tag: tagPropType,
  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
  disabled: PropTypes.bool,
  active: PropTypes.bool,
  className: PropTypes.string,
  cssModule: PropTypes.object,
  onClick: PropTypes.func,
  href: PropTypes.any,
};

const defaultProps = {
  tag: 'a',
};

class NavLink extends React.Component {
  constructor(props) {
    super(props);

    this.onClick = this.onClick.bind(this);
  }

  onClick(e) {
    if (this.props.disabled) {
      e.preventDefault();
      return;
    }

    if (this.props.href === '#') {
      e.preventDefault();
    }

    if (this.props.onClick) {
      this.props.onClick(e);
    }
  }

  render() {
    let {
      className,
      cssModule,
      active,
      tag: Tag,
      innerRef,
      ...attributes
    } = this.props;

    const classes = mapToCssModules(classNames(
      className,
      'nav-link',
      {
        disabled: attributes.disabled,
        active: active
      }
    ), cssModule);

    return (
      <Tag {...attributes} ref={innerRef} onClick={this.onClick} className={classes} />
    );
  }
}

NavLink.propTypes = propTypes;
NavLink.defaultProps = defaultProps;

export default NavLink;

在这里您可以看到 NavLink 返回一个包装在我们作为 props 传递的标签内的组件。 Link（react-router组件）的基本功能，即路由组件，这里没有完成。因此将它作为 NavLink 的支柱传递让我感到困惑。

我相信这是他们提供可重用性的方式Link组件来自react-router或者也许是任何其他Link您要使用的组件！我们基本上拥有的是：

// react-router/Link
<Link to="/about">About</Link>

他们有什么NavLink:

      <Tag {...attributes} ref={innerRef} onClick={this.onClick} className={classes} />

Where {...attributes}将是除以下以外的任何其他财产：className, cssModule, active, tag, innerRef，因为它们是从道具中破坏的。

所以，他们这样做的原因。

1. 他们需要/提供onClick财产为Link成分。
2. 他们对造型有自己的标准className={classes}

而且，React 中最重要的事情之一是它的组件的可重用性，这意味着，在这件事上应用了 DRY 原则，因为，想象一下你没有NavLink组件并且您想要添加一个onClick支撑Link组件在需要时使用，那么无论你走到哪里，你都必须随身携带它：

  onClick(e) {
    if (this.props.disabled) {
      e.preventDefault();
      return;
    }

    if (this.props.href === '#') {
      e.preventDefault();
    }

    if (this.props.onClick) {
      this.props.onClick(e);
    }
  }

简而言之：这一切都是为了干燥原理