Прохождение Маршрута как опора от повторно используемого компонента - PullRequest
Новая
       21

Прохождение Маршрута как опора от повторно используемого компонента

0 голосов
/ 09 января 2019

У меня есть следующий компонент. Я хочу сделать его многоразовым, чтобы я мог использовать его в другой части приложения ... с разными маршрутами ..

КОМПОНЕНТ: 

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 мне нужно передать в PropTypes. И что еще мне нужно сделать? очевидно, теперь он работает с жестко закодированными маршрутами. Но мне нужно иметь динамику и быть призванным в качестве опоры для компонента, в котором я буду его использовать ...

1 Ответ

0 голосов
/ 09 января 2019

Вероятно, самым простым решением было бы просто добавить два 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>
...