我有以下内容。我想使其可重用,因此可以在应用程序的不同部分上使用它...具有不同的路由。
组件:
import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import './styles.scss';
export class ActionHeader extends Component {
static propTypes = {
linkTitle1: PropTypes.string,
linkTitle2: PropTypes.string,
linkNumber1: PropTypes.number,
linkNumber2: PropTypes.number
};
render() {
const { linkTitle1, linkTitle2, linkNumber1, linkNumber2 } = this.props;
return (
<Fragment>
<div className="d-flex justify-content-end">
<div className="link-box">
<h5>{linkTitle1}</h5>
<Link to="/management/users">
<h4>{linkNumber1}</h4>
</Link>
</div>
<div className="link-box px-4">
<h5>{linkTitle2}</h5>
<Link to="/management/accounts">
<h4>{linkNumber2}</h4>
</Link>
</div>
<i className="fas fa-ellipsis-h fa-lg justify-content-center" />
</div>
</Fragment>
);
}
}
const mapStateToProps = state => ({
user: state.auth.user
});
const mapDispatchToProps = {};
export default connect(
mapStateToProps,
mapDispatchToProps
)(ActionHeader);
我有2个问题。首先,我需要将哪种PropType
传递给PropType。另外我还需要做什么?显然现在它适用于硬编码的路由。但是我需要具有动态性,并被称为是将在其中使用它的组件的道具。
答案 0 :(得分:1)
最简单的解决方案可能是仅添加两个linkHref
道具并在链接中使用它们。
export class ActionHeader extends Component {
static propTypes = {
linkTitle1: PropTypes.string,
linkTitle2: PropTypes.string,
linkNumber1: PropTypes.number,
linkNumber2: PropTypes.number,
linkHref1: PropTypes.string,
linkHref2: PropTypes.string,
};
...
<h5>{linkTitle1}</h5>
<Link to={linkHref1}>
<h4>{linkNumber1}</h4>
</Link>
</h5>