React中如何从外部控制ErrorAlert组件的显示状态？

问题出在当前实现里：ErrorAlert组件自己维护了show状态，关闭后show变成false；但父组件是根据err是否存在来渲染组件，当新错误出现时，组件已经挂载过，内部的show状态不会自动重置为true，所以弹窗不显示。

下面给两种实用的解决办法：

方案一：把状态提到父组件（受控组件） #

把弹窗的显示状态交给父组件管理，这样新错误出现时可以直接控制弹窗显示：

父组件代码修改： #

import { useState, useEffect } from 'react';

// 父组件内的状态
const [err, setErr] = useState(null);
const [showErrorAlert, setShowErrorAlert] = useState(false);

// 监听错误变化，有新错误就打开弹窗
useEffect(() => {
  if (err) {
    setShowErrorAlert(true);
  }
}, [err]);

// 渲染弹窗的部分
{err ? (
  <ErrorAlert
    error={err}
    visible={showErrorAlert}
    onClose={() => setShowErrorAlert(false)}
  />
) : null}

ErrorAlert组件修改： #

const ErrorAlert = ({ error, visible, onClose }) => {
  return (
    <>
      <Alert
        show={visible}
        animate={{
          mount: { y: 0 },
          unmount: { y: 100 },
        }}
        dismissible={{
          onClose: onClose,
        }}
      >
        {error?.message || '发生了错误'}
      </Alert>
    </>
  );
};

方案二：组件内部监听错误变化重置状态 #

如果不想把状态提到父组件，可以在ErrorAlert内部监听error属性的变化，当新错误传入时自动重置显示状态：

const ErrorAlert = ({ error }) => {
  const [show, setShow] = React.useState(true);

  // 监听error的变化，新错误进来就打开弹窗
  React.useEffect(() => {
    if (error) {
      setShow(true);
    }
  }, [error]);

  return (
    <>
      <Alert
        show={show}
        animate={{
          mount: { y: 0 },
          unmount: { y: 100 },
        }}
        dismissible={{
          onClose: () => setShow(false),
        }}
      >
        {error?.message || '发生了错误'}
      </Alert>
    </>
  );
};

两种方案选哪种都行：方案一更适合需要在多个地方控制弹窗显示的场景，方案二更适合组件独立管理状态的情况。

内容的提问来源于stack exchange，提问作者monkeyUser