Блог

Главная - Вопросы по программированию - Разработка компонента React является многоразовой

Разработка компонента React является многоразовой

#reactjs #typescript

#reactjs #typescript

Вопрос:

Я создаю веб-приложения, используя react и typescript. У меня довольно похожие компоненты и только разные api.( пример: функция onLoadInfoMasterBill() ) Как я могу написать общие компоненты, которые можно использовать повторно? Я только недавно начал изучать react и typescript.

  export class UIAirHoubillForm extends UIHoubillForm {
  onLoadInfoMasterBill() {
    let { appContext, pageContext, observer } = this.props;
    let houseBill = observer.getMutableBean();
    let callback = (result: any) => {
      let observer = new MultiBeanObserver(result.data);
      let html = <UIAirMasterBill appContext={appContext} pageContext={pageContext} observer={observer} />;
      pageContext.onAdd('master-bill-detail', `Master Bill ${houseBill.masterBillCode}`, html);
    };
    let restClient = appContext.getServerContext().getRestClient();
    restClient.get(`/logistics/management/air/master-bill/${houseBill.masterBillCode}`, {}, callback);
  }

  renderMasterCodeField(houseBill: any) {
    let { FormGroup } = widget.layout;
    let { BBReference } = widget.input;
    let html = (
      <FormGroup>
        <label>Master Bill Code</label>
        <BBReference bean={houseBill} field={'masterBillCode'} onInfo={() => this.onLoadInfoMasterBill()} />
      </FormGroup>
    );
    return html;
  }
}
 
   export class UISeaHoubillForm extends UIHoubillForm {
  onLoadInfoMasterBill() {
    let { appContext, pageContext, observer } = this.props;
    let houseBill = observer.getMutableBean();
    let callback = (result: any) => {
      let observer = new MultiBeanObserver(result.data);
      let html = <UISeaMasterBill appContext={appContext} pageContext={pageContext} observer={observer} />;
      pageContext.onAdd('master-bill-detail', `Master Bill ${houseBill.masterBillCode}`, html);
    };
    let restClient = appContext.getServerContext().getRestClient();
    restClient.get(`/logistics/management/sea/master-bill/${houseBill.masterBillCode}`, {}, callback);
  }

  renderMasterCodeField(houseBill: any) {
    let { FormGroup } = widget.layout;
    let { BBReference } = widget.input;
    let html = (
      <FormGroup>
        <label>Master Bill Code</label>
        <BBReference bean={houseBill} field={'masterBillCode'} onInfo={() => this.onLoadInfoMasterBill()} />
      </FormGroup>
    );
    return html;
  }
}

Комментарии:

1. передайте URL-адрес api в качестве реквизита, затем componentDidMount() прочитайте URL-адрес и вызовите запрос api.

2. Код в любом фрагменте не является компонентом react, и, если мои глаза меня не подводят, похоже, что вы опубликовали один и тот же код дважды.

Ответ №1:

Выглядит как общая функция js

Вы можете передать api в качестве параметра

 onLoadInfoMasterBill('/logistics/management/sea/master-bill/') //for sea
onLoadInfoMasterBill('/logistics/management/air/master-bill/') //for air

Вот как будет выглядеть функция

 onLoadInfoMasterBill(apiParam) {
let { appContext, pageContext, observer } = this.props;
let houseBill = observer.getMutableBean();
let callback = (result: any) => {
  let observer = new MultiBeanObserver(result.data);
  let html = <UIAirMasterBill appContext={appContext} pageContext={pageContext} observer={observer} />;
  pageContext.onAdd('master-bill-detail', `Master Bill ${houseBill.masterBillCode}`, html);
};
let restClient = appContext.getServerContext().getRestClient();
restClient.get(`${apiParam}${houseBill.masterBillCode}`, {}, callback);
}

Ответ №2:

Вы можете назначить компоненту некоторый каталог, а затем проверить его componentDidMount() следующим образом :

 <Route
    exact
    path={[
      "/:sea",
      "/:air",
      "/:other",
    ]}
    component={Blog}
  />

тогда componentDidMount() должно быть так :

 componentDidMount(){
  let path = this.props.location.pathname;
  ....
  restClient.get(`/logistics/management${path}/master-bill/${houseBill.masterBillCode}`, {}, callback);
}