Использование тега для передачи атрибута внутри компонента обратной связи NavLink - PullRequest
Новая
       19

Использование тега для передачи атрибута внутри компонента обратной связи NavLink

1 голос
/ 13 января 2020

Может кто-нибудь помочь мне выяснить, в чем может быть смысл передачи тега Link внутри компонента NavLink, например: 

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

Код для NavLink (компонентactstrap) приведен ниже: 

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 возвращает компонент, заключенный в тег, который мы передали как реквизит. Базовая c функция Link (компонент-маршрутизатор), т.е. маршрутизация компонентов, здесь не выполняется. Так что передача его в качестве опоры для NavLink сбивает меня с толку.

1 Ответ

1 голос
/ 13 января 2020

Я полагаю, что именно так они обеспечивают возможность повторного использования по сравнению с Link компонентом react-router или, возможно, любым другим Link компонентом, который вы хотите использовать! то, что мы в основном имеем: 

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

Что они имеют в NavLink: 

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

Где {...attributes} будет любым другим свойством, отличным от: className, cssModule, active, tag, innerRef, потому что они уничтожены реквизитом.

Итак, причина, по которой они это сделали.

  1. Им было необходимо / предоставлено onClick свойство для компонента Link.
  2. Они есть собственный стандарт для стиля оформления className={classes}

И одна из самых важных вещей в React - это возможность многократного использования компонента, то есть принцип DRY применяется в этом вопросе, потому что, Представьте, что у вас нет NavLink компонента, и вы хотите добавить onClick опору для Link компонента, когда это необходимо, тогда вам придется носить его везде, где вы 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 Принцип

...