[有人可以帮我弄清楚像下面这样在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的道具传递给我感到困惑。
// 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}
样式
NavLink
组件,而您想添加一个[C0 ]随时使用onClick
组件的道具,那么无论走到哪里都必须随身携带:Link
缩短一点:都是为了DRY原理