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

Posted 2023-02-21

【中文标题】使用 Tag 在 NavLink reactstrap 组件中传递属性

【英文标题】：Using Tag to pass a attribute inside NavLink reactstrap component

【发布时间】：2020-04-30 00:19:16

【问题描述】：

谁能帮我弄清楚像这样在 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 或 a 标签）

【参考方案1】：

我相信这是他们如何通过来自react-router 或您想使用的任何其他Link 组件的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，因为它们被道具破坏了。

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

他们需要/为onClick 组件提供了onClick 属性。 他们有自己的样式标准className=classes

而且，React 中最重要的事情之一是它的组件的可重用性，意思是，在这件事上应用了 DRY 原则，因为，假设你没有 NavLink 组件，你想添加一个 @ 987654334@ 用于 Link 组件的道具，无论何时需要，您都必须随身携带：

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

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

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

简而言之：这一切都是为了DRY 原则

【讨论】：

是的......这是有道理的。但更令人困惑的是，Link 标签不能在路由器之外呈现。请参阅此错误 (github.com/storybookjs/storybook/issues/8892)。但是，这里的 Link 是直接渲染的，没有包裹在 Router 中。实际上，我正在尝试构建像 NavLink 这样的组件，但是当我将 Link 作为 prop 传递时，它会给出错误。此外，要使链接工作，它必须在路由器内部。否则，将无法进行导航。

在这种情况下，库维护者不必关心使用 NavLink 的开发人员在哪里使用它，因为他们有 tag 灵活地等待任何类型的 Prop锚组件，而且，每当我们使用react-router/Link时，我们默认情况下应该在整个应用程序周围有一个Router，对吗？ Link tag can't be rendered outside a Router. 的答案。