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

问题描述

谁能帮我弄清楚在 NavLink 组件中传递 Link 标签的意义是什么:

Can someone help me to figure out what can be the significance of passing the Link tag inside the NavLink component like this :

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

NavLink(reactstrap 组件)的代码如下:

The code for NavLink (reactstrap component) is given below :

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 的道具让我很困惑.

Here you can see that the NavLink returns a component wrapped inside the tag we passed as props. The basic function of Link (react-router component) i.e routing the components is not accomplished here. So passing it as a prop for NavLink is confusing me.

推荐答案

我相信这是他们如何通过来自 react-router 的 Link 组件提供可重用性> 或者您想使用的任何其他 Link 组件！我们基本上拥有的是:

I believe it's a how they provide re-usability over the Link component coming from the react-router or maybe any other Link component you want to use! what we basically have is:

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

他们在 NavLink 中有什么:

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

其中 {...attributes} 将是除以下之外的任何其他属性:className、cssModule、active、tag、innerRef，因为它们是从props中析构的.

Where {...attributes} will be any other property other than:className, cssModule, active, tag, innerRef, because they are destructed from props.

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

So, The reason they did that.

1. 他们需要/提供了 Link 组件的 onClick 属性.
2. 他们有自己的样式标准className={classes}

1. They needed/provided onClick property for the Link component.
2. They have there own standard to styling stuff className={classes}

而且，React 中最重要的事情之一是组件的可重用性，这意味着 DRY 原则应用于这件事，因为，假设您没有 NavLink 组件而您想要在需要时为 Link 组件添加一个 onClick 道具，那么无论您走到哪里，都必须随身携带:

And, one of the most important things in React is it's Component's Re-usability, meaning, DRY principle is applied in this matter, because, Imagine you don't have the NavLink Component and you want to add a onClick prop for the Link component whenever it's needed, then you'll have to carry this around wherever you go:

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

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

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

缩短:这一切都是为了DRY原则

这篇关于使用 Tag 在 NavLink reactstrap 组件内部传递属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！