Question

我有以下问题：我已将模态的标记/代码移动到 React 中的单独组件，因为文件变得很长，我可能想在其他地方使用它。

我得到了它，以便我可以打开和关闭它，但是如果我想重新打开它，它就不起作用。我怀疑这是因为我设置了一个标志，当我点击关闭时将其显示为 false，但我无法重置它以使其重新打开。

我的代码如下

在主组件中

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

 <InfoModal show={showModal} />

在 InfoModal 组件中


  const [ShowModal, setShowModal] = useState(true);
  return (
    <>
      {show && ShowModal ? (
...
<button
 className="closeButton"
 onClick={() => setShowModal(false)}
 >
 <span className="closeButton">
                      ×
 </span>
 </button>
...
 </>
  );

我在这里做错了什么，是否应该有更好的方法来做到这一点。非常感谢任何建议

Answer 1

您可以从 InfoModal 中删除重复的状态，而是将您的 setShowModal 从 Main 组件作为道具传递给 InfoModal，例如<InfoModal show={showModal} onClose={() => setShowModal(false)} />

// Main Component
const [showModal, setShowModal] = React.useState(false);
...
<button
  onClick={() => setShowModal(true)}
  type="button"
  claseName="infobutton"
>
  <i class="fas fa-info-circle"></i>
</button>
...

<InfoModal show={showModal} onClose={() => setShowModal(false)} />


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

Answer 2

以这种方式修改您的第二个组件，它应该可以工作。在您的组件中，您永远不会再次将状态设置为 true，也永远不会打开模态

 const [ShowModal, setShowModal] = useState(true);
    useEffect(() => { 
            setShowModal(show)    
      }, [props]); 
     
      return (
        <>
          {show ? (
    ...
    <button
     className="closeButton"
     onClick={() => setShowModal(false)}
     >
     <span className="closeButton">
                          ×
     </span>
     </button>
    ...
     </>
      );

如何在反应中将组件重置为其初始状态

2 个答案: