组件属性展开

dashboard/src/components/corpus/BookViewer.tsx

@@ -5,44 +5,44 @@ import PaliChapterListByPara from "./PaliChapterListByPara";
 import PaliChapterHead from "./PaliChapterHead";
 import { IChapterClickEvent } from "./PaliChapterList";
 
-export interface IParagraph {
-	book: number;
-	para: number;
+export interface IChapter {
+  book: number;
+  para: number;
 }
 
-interface IWidgetBookViewer {
-	para: IParagraph;
-	onChange?: Function;
+interface IWidget {
+  chapter: IChapter;
+  onChange?: Function;
 }
-const Widget = (prop: IWidgetBookViewer) => {
-	const [para, setPara] = useState(prop.para);
-	useEffect(() => {
-		if (typeof prop.onChange !== "undefined") {
-			prop.onChange(para);
-		}
-	}, [para]);
+const Widget = ({ chapter, onChange }: IWidget) => {
+  const [currChapter, setCurrChpater] = useState(chapter);
+  useEffect(() => {
+    if (typeof onChange !== "undefined") {
+      onChange(currChapter);
+    }
+  }, [currChapter]);
 
-	useEffect(() => {
-		setPara(prop.para);
-	}, [prop.para]);
-	return (
-		<>
-			<PaliChapterHead
-				onChange={(e: IParagraph) => {
-					setPara(e);
-				}}
-				para={para}
-			/>
-			<PaliChapterChannelList para={para} />
-			<PaliChapterListByPara
-				para={para}
-				onChapterClick={(e: IChapterClickEvent) => {
-					setPara({ book: e.para.Book, para: e.para.Paragraph });
-					console.log("PaliChapterListByPara", "onchange", e);
-				}}
-			/>
-		</>
-	);
+  useEffect(() => {
+    setCurrChpater(chapter);
+  }, [chapter]);
+  return (
+    <>
+      <PaliChapterHead
+        onChange={(e: IChapter) => {
+          setCurrChpater(e);
+        }}
+        para={currChapter}
+      />
+      <PaliChapterChannelList para={currChapter} />
+      <PaliChapterListByPara
+        chapter={currChapter}
+        onChapterClick={(e: IChapterClickEvent) => {
+          setCurrChpater({ book: e.para.Book, para: e.para.Paragraph });
+          console.log("PaliChapterListByPara", "onchange", e);
+        }}
+      />
+    </>
+  );
 };
 
 export default Widget;