增加其它组件调用登录modal的方法

components/NavHeader/index.tsx

@@ -43,7 +43,8 @@ const items: TabsProps["items"] = [
 export default function NavHeader() {
   const router = useRouter();
   const [currentPath, setCurrentPath] = useState("");
-  const { userInfo, testLogin, logout } = useContext(UserContext);
+  const { userInfo, testLogin, logout, setNeedLogin, needLogin } =
+    useContext(UserContext);
 
   useEffect(() => {
     setCurrentPath(router.route);
@@ -92,6 +93,13 @@ export default function NavHeader() {
     }
   }
 
+  //从其它组件通知需要登录
+  useEffect(() => {
+    if (needLogin) {
+      setOpenLoginModal(true);
+    }
+  }, [needLogin]);
+
   return (
     <div className={styles.navHeader}>
       <div className={styles.nav}>
@@ -138,7 +146,10 @@ export default function NavHeader() {
       </div>
       <LoginModal
         open={openLoginModal}
-        onCancel={() => setOpenLoginModal(false)}
+        onCancel={() => {
+          setOpenLoginModal(false);
+          setNeedLogin(false);
+        }}
       ></LoginModal>
       <PublishModal
         open={openPublishModal}

lib/userProvider.tsx

-import React, { createContext, Dispatch, SetStateAction, useEffect, useState } from "react";
+import React, {
+  createContext,
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useState,
+} from "react";
 import api, { UserInfoResp } from "~/api";
 
 export const UserContext = createContext<{
@@ -6,11 +12,15 @@ export const UserContext = createContext<{
   logout: () => void;
   userInfo: UserInfoResp | null;
   setUserInfo: Dispatch<SetStateAction<UserInfoResp | null>>;
+  needLogin: Boolean;
+  setNeedLogin: Dispatch<SetStateAction<Boolean>>;
 }>({
   testLogin() {},
   logout() {},
   userInfo: null,
   setUserInfo() {},
+  needLogin: false,
+  setNeedLogin() {},
 });
 
 type Props = {
@@ -18,6 +28,7 @@ type Props = {
 };
 const UserProvider = ({ children }: Props) => {
   const [userInfo, setUserInfo] = useState<UserInfoResp | null>(null);
+  const [needLogin, setNeedLogin] = useState<Boolean>(false); //用于通知登录modal需要打开
 
   useEffect(() => {
     try {
@@ -48,7 +59,16 @@ const UserProvider = ({ children }: Props) => {
   }
 
   return (
-    <UserContext.Provider value={{ userInfo, setUserInfo, testLogin, logout }}>
+    <UserContext.Provider
+      value={{
+        userInfo,
+        setUserInfo,
+        testLogin,
+        logout,
+        needLogin,
+        setNeedLogin,
+      }}
+    >
       {children}
     </UserContext.Provider>
   );

pages/forum/index.page.tsx

@@ -13,11 +13,12 @@ import Layout from "~/components/layout";
 import styles from "./index.module.scss";
 import errImg from "~/assets/errImg";
 import { RightOutlined } from "@ant-design/icons";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import PublishMessage from "./components/publishMessage";
 import api, { ByDynamicParams, Dynamic } from "./api";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { useUser } from "~/lib/hooks";
+import { UserContext } from "~/lib/userProvider";
 
 interface Item extends Dynamic {
   openComment?: boolean; //是否开启评论
@@ -32,8 +33,8 @@ export default function Forum() {
     pageNo: 1,
     pageSize: 16,
   });
-  const [count, setCount] = useState(0);  //动态总数
-  const userInfo = useUser();   //获取信息
+  const [count, setCount] = useState(0); //动态总数
+  const { userInfo, setNeedLogin } = useContext(UserContext);
 
   useEffect(() => {
     api
@@ -56,7 +57,11 @@ export default function Forum() {
    * 展示发布模态框
    */
   const showModal = () => {
-    setIsModalOpen(true);
+    if (userInfo) {
+      setIsModalOpen(true);
+    } else {
+      setNeedLogin(true);
+    }
   };
 
   /**
@@ -78,16 +83,26 @@ export default function Forum() {
 
   //评论内容
   const onComment = (values: any, id: number, i: number) => {
-    api.comment({
-      content: values.content,
-      dynamicId: id,
-      userId: userInfo!.id,
-    }).then(res => {
-      if(res.code === '200'){
-
-      }
-    });
+    api
+      .comment({
+        content: values.content,
+        dynamicId: id,
+        userId: userInfo!.id,
+      })
+      .then((res) => {
+        if (res.code === "200") {
+        }
+      });
   };
+
+  //评论内容
+  const onCommentContent = () => {
+    if(userInfo){
+
+    }else{
+      setNeedLogin(true);
+    }
+  }
   return (
     <Layout>
       <div className={styles.forum}>
@@ -165,8 +180,17 @@ export default function Forum() {
                   </Space>
                   {item.openComment && (
                     <div className={styles.commentWrap}>
-                      <Form onFinish={(values) => {onComment(values, item.id, i)}}>
-                        <Form.Item name="content" rules={[{ required: true }]} help="" style={{marginBottom: 0}}>
+                      <Form
+                        onFinish={(values) => {
+                          onComment(values, item.id, i);
+                        }}
+                      >
+                        <Form.Item
+                          name="content"
+                          rules={[{ required: true }]}
+                          help=""
+                          style={{ marginBottom: 0 }}
+                        >
                           <div className={styles.draftWrap}>
                             <div className={styles.commentHeadImg}>自已</div>
                             <Input
@@ -176,7 +200,12 @@ export default function Forum() {
                           </div>
                         </Form.Item>
                         <div className={styles.btnCommentWrap}>
-                          <Button type="primary" htmlType="submit" className="btnComment">
+                          <Button
+                            type="primary"
+                            htmlType="submit"
+                            className="btnComment"
+                            onClick={onCommentContent}
+                          >
                             评论
                           </Button>
                         </div>