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

问题描述 投票:0回答:1

[有人可以帮我弄清楚像下面这样在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返回一个包装在我们作为道具传递的标签内的组件。链接(反应路由器组件)的基本功能,即路由组件,此处未完成。因此,将其作为NavLink的道具传递给我感到困惑。

javascript html reactjs react-router reactstrap
1个回答
0
投票
// react-router/Link <Link to="/about">About</Link>

NavLink中的内容:

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

{...attributes}将是除以下以外的任何其他属性:className, cssModule, active, tag, innerRef,因为它们已被道具破坏。

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

他们需要/提供了onClick组件的Link属性。

    他们有自己的样式className={classes}样式
  • 而且,React中最重要的事情之一就是它的组件的可重用性,这意味着在此问题上应用了DRY原理,因为,假设您没有NavLink组件,而您想添加一个[C0 ]随时使用onClick组件的道具,那么无论走到哪里都必须随身携带:
  • Link

    缩短一点:都是为了

    DRY原理

  • © www.soinside.com 2019 - 2024. All rights reserved.