如何使Reactjs可重用？

Question

在每个标签上都有来自ant design的标签，显示方式有所不同。并具有执行相同任务的功能，只有true-false，但是我很困惑，因为如何使每个选项卡上的显示均不同，当单击按钮时，订单明细（明细Pesanan）将显示为未付费（Belum Bayar），反之亦然

我做了一个这样的函数：

 actionShowOrderListWaiting = (listener) => {
        this.setState({
          [listener]: !this.state[listener]
        })
      }

      actionShowOrderDetailsDashboardNotPay = (order, invoiceNumber, id, index) => {
        this.actionShowOrderListWaiting("isShowOrderDetailsDashboardNotPay");
        this.responseDetailDashboard(order, invoiceNumber, id, index);
      };

      actionShowOrderDetailsDashboardNotSent = (order, invoiceNumber, id, index) => {
        this.actionShowOrderListWaiting("isShowOrderDetailsDashboardNotSent");
        this.responseDetailDashboard(order, invoiceNumber, id, index);
      };

      actionShowOrderDetailsDashboardInDelivery = (order, invoiceNumber, id, index) => {
        this.actionShowOrderListWaiting("isShowOrderDetailsDashboardInDelivery")
        this.responseDetailDashboard(order, invoiceNumber, id, index);
      };

      actionShowOrderDetailsDashboardFinish = (order, invoiceNumber, id, index) => {
        this.actionShowOrderListWaiting("isShowOrderDetailsDashboardFinish")
        this.responseDetailDashboard(order, invoiceNumber, id, index);
      };

      actionShowOrderDetailsDashboardCancel = (order, invoiceNumber, id, index) => {
        this.actionShowOrderListWaiting("isShowOrderDetailsDashboardCancel")
        this.responseDetailDashboard(order, invoiceNumber, id, index);
      };

      responseDetailDashboard(order, invoiceNumber, id, index) {
        this.setState({
          order: order,
          invoiceNumber: invoiceNumber,
          id: id,
          index: index
        })
      }; 

 responseListWaiting(
    responseProductOrder,
    showReceivedConfirm,
    tabsNotPay,
    tabsNotSent,
    tabsInDelivery,
    tabsFinish,
    tabsCancel) {
    return <OrderListWaiting
      productOrder={responseProductOrder}
      actionShowOrderDetailsDashboardNotPay={this.actionShowOrderDetailsDashboardNotPay}
      actionShowOrderDetailsDashboardNotSent={this.actionShowOrderDetailsDashboardNotSent}
      actionShowOrderDetailsDashboardInDelivery={this.actionShowOrderDetailsDashboardInDelivery}
      actionShowOrderDetailsDashboardFinish={this.actionShowOrderDetailsDashboardFinish}
      actionShowOrderDetailsDashboardCancel={this.actionShowOrderDetailsDashboardCancel}
      showReceivedConfirm={showReceivedConfirm}
      tabsNotPay={tabsNotPay}
      tabsNotSent={tabsNotSent}
      tabsInDelivery={tabsInDelivery}
      tabsFinish={tabsFinish}
      tabsCancel={tabsCancel}
    />   }

  responseOrderDetailsDashboard(
    labelTabDetails,
    labelEstimateAccepted,
    tabsInDeliveryOrderStatusUser,
    tabsFinishOrderStatusUser,
    tabsNotPay,
    tabsNotSent,
    tabsInDelivery,
    tabsFinish,
    tabsCancel,
    buttonTabsNotPay,
    buttonTabsNotSent,
    buttonTabsInDelivery,
    buttonTabsFinish,
    buttonTabsCancel) {
    return <OrderDetailsDashboard
      invoiceNumber={this.state.invoiceNumber}
      indexDetails={this.state.index}
      id={this.state.id}
      order={this.state.order}
      showReceivedConfirm={this.showReceivedConfirm}
      productOrderInDelivery={this.state.productOrderInDelivery}
      actionShowOrderListWaitingNotPay={() => this.actionShowOrderListWaiting("isShowOrderDetailsDashboardNotPay")}
      actionShowOrderListWaitingNotSent={() => this.actionShowOrderListWaiting("isShowOrderDetailsDashboardNotSent")}
      actionShowOrderListWaitingInDelivery={() => this.actionShowOrderListWaiting("isShowOrderDetailsDashboardInDelivery")}
      actionShowOrderListWaitingFinish={() => this.actionShowOrderListWaiting("isShowOrderDetailsDashboardFinish")}
      actionShowOrderListWaitingCancel={() => this.actionShowOrderListWaiting("isShowOrderDetailsDashboardCancel")}
      labelTabDetails={labelTabDetails}
      estimateAccepted={labelEstimateAccepted}
      tabsInDeliveryOrderStatusUser={tabsInDeliveryOrderStatusUser}
      tabsFinishOrderStatusUser={tabsFinishOrderStatusUser}
      tabsNotPay={tabsNotPay}
      tabsNotSent={tabsNotSent}
      tabsInDelivery={tabsInDelivery}
      tabsFinish={tabsFinish}
      tabsCancel={tabsCancel}
      buttonTabsNotPay={buttonTabsNotPay}
      buttonTabsNotSent={buttonTabsNotSent}
      buttonTabsInDelivery={buttonTabsInDelivery}
      buttonTabsFinish={buttonTabsFinish}
      buttonTabsCancel={buttonTabsCancel} />   }

该函数的目的是在这里播放true false：

我的问题是如何使此功能可重用并且仅使用一种状态？