React如何将组件重置为初始状态？模态框关闭后无法重开求解

错误原因 #

• 状态重复维护：主组件和子组件各自维护了独立的模态框显隐状态，关闭操作仅修改了子组件内部状态，父组件的showModal仍为true，再次点击打开按钮时父组件状态无变化，不会触发子组件状态重置，因此模态框无法二次打开
• 代码拼写问题：主组件按钮的className错写为claseName，<i>标签的原生class属性在React中应改为className
• 规范问题：子组件内部状态ShowModal首字母大写不符合小驼峰的变量命名规范，容易和组件名混淆

最优实现方案 #

1. 状态提升实现（最常用，推荐） #

父组件维护显隐状态，子组件仅接收显隐属性和关闭回调，不维护内部状态，复用性更高：

主组件代码

const [showModal, setShowModal] = React.useState(false);
...
<button
  onClick={() => setShowModal(true)}
  type="button"
  className="infobutton"
>
  <i className="fas fa-info-circle"></i>
</button>
...
<InfoModal show={showModal} onClose={() => setShowModal(false)} />

InfoModal组件代码

const InfoModal = ({ show, onClose }) => {
  return (
    <>
      {show ? (
        ...
        <button
          className="closeButton"
          onClick={onClose}
        >
          <span className="closeButton">×</span>
        </button>
        ...
      ) : null}
    </>
  );
}

2. 兼容内部自主控制的实现（可选） #

如果需要子组件也能独立控制显隐，同时支持父组件触发打开，可以用useEffect同步父组件传入的show属性：

const InfoModal = ({ show, onClose }) => {
  const [innerShow, setInnerShow] = useState(show);
  // 同步父组件传入的show状态
  useEffect(() => {
    setInnerShow(show);
  }, [show]);

  const handleClose = () => {
    setInnerShow(false);
    onClose?.();
  }

  return (
    <>
      {innerShow ? (
        ...
        <button
          className="closeButton"
          onClick={handleClose}
        >
          <span className="closeButton">×</span>
        </button>
        ...
      ) : null}
    </>
  );
}

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