如何将函数作为props传递给React自定义Modal并解决显隐状态失效问题？

核心错误点 #

• 状态更新逻辑颠倒：登录成功后要展示通知Modal，你现在在Redux Action里调用ResModal(false)，而通知Modal的默认状态就是false，相当于没有修改状态，自然不会弹出。
• 拼写问题：登录组件里控制通知Modal的state命名为Opnemotal属于拼写错误，虽然不直接影响运行但极易造成维护混淆，建议重命名为语义化名称。
• 自定义Modal关闭事件未执行：关闭按钮的onClick回调只写了函数引用没有执行调用，点击时不会触发关闭逻辑。
• DOM结构嵌套错误：登录组件的return内容存在多余的</div>闭合标签，导致Modal组件被渲染到登录Modal的外层，可能被样式遮挡。
• 缺少请求错误处理：未捕获登录接口请求失败的场景，错误状态下不会弹出对应提示。

具体修改代码 #

1. 登录组件修改 #

function Login(props : Iprops) {
  const {setopenmodal, openmodal} = props
  const dispatch = useDispatch()
  // 重命名为语义化名称，避免拼写混淆
  const [notifyModalOpen, setNotifyModalOpen] = useState(false)
  // 补充表单状态绑定，原代码缺失这部分逻辑
  const [Email, setEmail] = useState("")
  const [Password, setPassword] = useState("")

  const handleLogin = async() => {
    dispatch(LoginHandler(Email, Password, setopenmodal, setNotifyModalOpen))
  }

  const CloseModal = () => {
    setNotifyModalOpen(false)
  }

  return (
    {/* 修正多余闭合标签，统一嵌套结构 */}
    <div style = {{opacity : openmodal ? '1' : '0', transform : openmodal ? 'translate(0vh)' : 'translate(-100vh)'}}>
      <div className="login">
        <h1>로그인</h1>
        {/* 此处补充邮箱、密码输入框，绑定Email和Password状态 */}
        <button onClick = {handleLogin}>로그인</button>
        <button>아이디/비밀번호 찾기</button>
      </div>
      <Modal 
        open = {notifyModalOpen} 
        close = {CloseModal} 
        header = {notifyModalOpen ? "로그인이 완료되었습니다" : "비밀번호를 확인해주시기 바랍니다"}
      />
    </div>
  );
}

export default Login;

2. Redux Action修改 #

export const LoginHandler = (Email : string, Password : string, setLoginModalClose : any, setNotifyModalOpen : any) => {
  return async(dispatch : Dispatch<Action>) => {
    try {
      const response = await axios.post('/api/authenticate',{
        email : Email,
        password : Password
      })
      localStorage.setItem("token", response.data)
      dispatch({
        type : ActionType.LOGIN_USER,
        payload : response.data
      })
      // 先关闭登录弹窗
      setLoginModalClose(false)
      // 打开成功通知弹窗
      setNotifyModalOpen(true)
    } catch (err) {
      // 登录失败时打开错误通知
      setNotifyModalOpen(true)
      console.error("登录失败", err)
    }
  }
}

3. 自定义Modal组件修改 #

interface IProps {
  open : boolean,
  confirm? : boolean,
  close : () => void,
  header : string,
  children? : React.ReactNode
}

function Modal(props : IProps) {
  const {open, close, header} = props
  return (
    <div className={ open ? 'openModal modal' : 'modal' }>
    { open ? (  
        <section>
            <header>
                {header}
                {/* 修正点击事件，直接执行close函数 */}
                <button className="close" onClick={close}> &times; </button>
            </header>
            <main>
                {props.children}
            </main>
            <footer>
                <button className="close" onClick={close}> close </button>
            </footer>
        </section>
    ) : null }
  </div>
  )
}

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