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

【问题标题】：How to render the same component but with initial state (conditionally)?如何渲染相同的组件但具有初始状态（有条件地）？
【发布时间】：2021-07-29 12:03:47
【问题描述】：

我有一个特定组件使用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。

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

我该怎么做？

【问题讨论】：

添加一个隐藏在你的 PBScanner 中的道具，如果它是真的，它将隐藏你的组件，这样你就可以在 PaymentScannerView 中有两个 PBScanner 实例并保持你的内部状态干净

标签： reactjs typescript

【解决方案1】：

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

如果状态应该在两个组件中分别维护，那么您应该同时渲染它们。然后组件本身应该决定它是否会返回任何东西。（根据@NicolasMenettrier 的建议）。
如果您希望它们在props.onFront 更改时丢失其状态，那么最简单的解决方案是添加一个key-property。例如：
```
<PBScanner key="front" .../> // and "back" respectively
```
这种方式 react 会将两者视为不同的，给它们自己的状态。
注意虽然这会使它们每次都失去它们的状态props.onFront更改.

【讨论】：

【解决方案2】：

正如他们之前所说，这取决于您想要什么。在我看来，简单的解决方案是将 key 属性添加到 PBScanner。

另一种解决方案是在 **PBScanner ** 中添加 useEffect 钩子，如下所示：

import React, {useEffect} from 'react'; 
...
export default PBScanner({header, ...}) {
const [count, setCount] = useState(0);
UseEffect(() => {
setCount(0); // each time PBScanner update with change in header
// (instruction...), Count go to 0.
}, [header]);//here you can use header or instruction ...

}

【讨论】：