时间戳

首页 > 解决方案 > 如何渲染相同的组件但具有初始状态（有条件地）？

reactjs - 如何渲染相同的组件但具有初始状态（有条件地）？

问题描述

我有一个特定的组件，它使用useState. 问题是我想有条件地渲染相同的组件：

const PaymentScannerView: React.FC<Props> = (props: React.PropsWithChildren<Props>) => {
  const { t } = useTranslation();

  return props.onFront ? (
    <PBScanner
      header={t('paymentScanner.front.capture.header')}
      instruction={t('paymentScanner.front.capture.instruction')}
      reCaptureText={t('paymentScanner.front.confirmation.reCaptureText')}
      continueText={t('paymentScanner.front.confirmation.continueText')}
      confirmCaptureHandler={props.confirmFrontCaptureHanlder}
      reCaptureHandler={props.reCaptureFrontHandler}
    />
  ): (
    <PBScanner
      header={t('paymentScanner.back.capture.header')}
      instruction={t('paymentScanner.back.capture.instruction')}
      reCaptureText={t('paymentScanner.back.confirmation.reCaptureText')}
      continueText={t('paymentScanner.back.confirmation.continueText')}
      confirmCaptureHandler={props.confirmBackCaptureHandler}
      reCaptureHandler={props.reCaptureBackHandler}
    />
  );
};

但我不想在这两个“版本”之间分享这种状态。为了澄清这一点，假设该PBScanner组件具有从 计数的内部状态0。那么它是否在第一个条件内渲染了 5 次（意思props.onFront是 5 次为真），然后，即使突然props.onFront等于false然后第二个版本将保留状态并使用等于 的计数器进行渲染5。

那不是我想要的。我想“处理”这两个组件，因为它们不会共享状态。

我该怎么做？

标签： reactjstypescript

解决方案

这取决于你真正想要什么。

  1. 如果状态应该在两个组件中单独维护，那么您应该同时渲染它们。然后组件本身应该决定它是否会返回任何东西。（根据@NicolasMenettrier 的建议）。

  2. 如果您希望它们在props.onFront更改时丢失其状态，那么最简单的解决方案是添加一个键属性。例如：

    <PBScanner key="front" .../> // and "back" respectively

    这种方式 react 会将两者视为不同的，赋予它们自己的状态。
    请注意，这将使它们在每次 props.onFront更改时都失去其状态。

推荐阅读