🐛 修正按钮渲染逻辑，避免 render 阶段副作用，改用 JSX 条件渲染 & 修改 children (#1153)

cyfung1031 · CodFrm · web-flow · commit be818dc29fdd · 2026-01-22T13:34:15.000+08:00
* React Fix - No State Mutation

* Omit Trash Code

* Code Optimization

* 改用 named slot

* 英文修正：preNode -&gt; headerContent

* 修改为children模式

---------

Co-authored-by: 王一之 &lt;yz@ggnb.top&gt;
diff --git a/src/pages/components/FileSystemParams/index.tsx b/src/pages/components/FileSystemParams/index.tsx
@@ -6,23 +6,22 @@ import { useTranslation } from "react-i18next";
 import { ClearNetDiskToken, netDiskTypeMap } from "@Packages/filesystem/auth";
 
 const FileSystemParams: React.FC<{
-  preNode: React.ReactNode | string;
+  headerContent: React.ReactNode | string;
   onChangeFileSystemType: (type: FileSystemType) => void;
   onChangeFileSystemParams: (params: any) => void;
-  actionButton: React.ReactNode[];
+  children: React.ReactNode;
   fileSystemType: FileSystemType;
   fileSystemParams: any;
 }> = ({
   onChangeFileSystemType,
   onChangeFileSystemParams,
-  preNode,
-  actionButton,
+  headerContent,
+  children,
   fileSystemType,
   fileSystemParams,
 }) => {
   const fsParams = FileSystemFactory.params();
   const { t } = useTranslation();
-  const actionButtons = [...actionButton];
 
   const fileSystemList: {
     key: FileSystemType;
@@ -51,34 +50,12 @@ const FileSystemParams: React.FC<{
   ];
 
   const netDiskType = netDiskTypeMap[fileSystemType];
-
-  if (netDiskType) {
-    const netDiskName = fileSystemList.find((item) => item.key === fileSystemType)?.name;
-
-    actionButtons.push(
-      <Popconfirm
-        key="netdisk-unbind"
-        title={t("netdisk_unbind_confirm", { provider: netDiskName })}
-        onOk={async () => {
-          try {
-            await ClearNetDiskToken(netDiskType);
-            Message.success(t("netdisk_unbind_success", { provider: netDiskName })!);
-          } catch (error) {
-            Message.error(`${t("netdisk_unbind_error", { provider: netDiskName })}: ${String(error)}`);
-          }
-        }}
-      >
-        <Button type="primary" status="danger">
-          {t("netdisk_unbind", { provider: netDiskName })}
-        </Button>
-      </Popconfirm>
-    );
-  }
+  const netDiskName = netDiskType ? fileSystemList.find((item) => item.key === fileSystemType)?.name : null;
 
   return (
     <>
       <Space>
-        {preNode}
+        {headerContent}
         <Select
           value={fileSystemType}
           style={{ width: 120 }}
@@ -92,7 +69,25 @@ const FileSystemParams: React.FC<{
             </Select.Option>
           ))}
         </Select>
-        {actionButtons.map((item) => item)}
+        {children}
+        {netDiskType && netDiskName && (
+          <Popconfirm
+            key="netdisk-unbind"
+            title={t("netdisk_unbind_confirm", { provider: netDiskName })}
+            onOk={async () => {
+              try {
+                await ClearNetDiskToken(netDiskType);
+                Message.success(t("netdisk_unbind_success", { provider: netDiskName })!);
+              } catch (error) {
+                Message.error(`${t("netdisk_unbind_error", { provider: netDiskName })}: ${String(error)}`);
+              }
+            }}
+          >
+            <Button type="primary" status="danger">
+              {t("netdisk_unbind", { provider: netDiskName })}
+            </Button>
+          </Popconfirm>
+        )}
       </Space>
       <Space
         style={{
diff --git a/src/pages/components/RuntimeSetting/index.tsx b/src/pages/components/RuntimeSetting/index.tsx
@@ -76,7 +76,7 @@ const RuntimeSetting: React.FC = () => {
           <CollapseItem header={t("storage_api")} name="storage">
             <Space direction="vertical">
               <FileSystemParams
-                preNode={
+                headerContent={
                   <Typography.Text>
                     {t("settings")}
                     <Link
@@ -88,63 +88,6 @@ const RuntimeSetting: React.FC = () => {
                     {t("use_file_system")}
                   </Typography.Text>
                 }
-                actionButton={[
-                  <Button
-                    key="save"
-                    type="primary"
-                    onClick={async () => {
-                      try {
-                        await FileSystemFactory.create(fileSystemType, fileSystemParams);
-                      } catch (e) {
-                        Message.error(`${t("account_validation_failed")}: ${e}`);
-                        return;
-                      }
-                      const params = { ...fileSystemParams };
-                      params[fileSystemType] = fileSystemParams;
-                      systemConfig.setCatFileStorage({
-                        status: "success",
-                        filesystem: fileSystemType,
-                        params,
-                      });
-                      setStatus("success");
-                      Message.success(t("save_success")!);
-                    }}
-                  >
-                    {t("save")}
-                  </Button>,
-                  <Button
-                    key="reset"
-                    onClick={() => {
-                      systemConfig.setCatFileStorage({
-                        status: "unset",
-                        filesystem: "webdav",
-                        params: {},
-                      });
-                      setStatus("unset");
-                      setFilesystemParam({});
-                      setFilesystemType("webdav");
-                    }}
-                    type="primary"
-                    status="danger"
-                  >
-                    {t("reset")}
-                  </Button>,
-                  <Button
-                    key="open"
-                    type="secondary"
-                    onClick={async () => {
-                      try {
-                        let fs = await FileSystemFactory.create(fileSystemType, fileSystemParams);
-                        fs = await fs.openDir("ScriptCat/app");
-                        window.open(await fs.getDirUrl(), "_black");
-                      } catch (e) {
-                        Message.error(`${t("account_validation_failed")}: ${e}`);
-                      }
-                    }}
-                  >
-                    {t("open_directory")}
-                  </Button>,
-                ]}
                 fileSystemType={fileSystemType}
                 fileSystemParams={fileSystemParams}
                 onChangeFileSystemType={(type) => {
@@ -153,7 +96,63 @@ const RuntimeSetting: React.FC = () => {
                 onChangeFileSystemParams={(params) => {
                   setFilesystemParam(params);
                 }}
-              />
+              >
+                <Button
+                  key="save"
+                  type="primary"
+                  onClick={async () => {
+                    try {
+                      await FileSystemFactory.create(fileSystemType, fileSystemParams);
+                    } catch (e) {
+                      Message.error(`${t("account_validation_failed")}: ${e}`);
+                      return;
+                    }
+                    const params = { ...fileSystemParams };
+                    params[fileSystemType] = fileSystemParams;
+                    systemConfig.setCatFileStorage({
+                      status: "success",
+                      filesystem: fileSystemType,
+                      params,
+                    });
+                    setStatus("success");
+                    Message.success(t("save_success")!);
+                  }}
+                >
+                  {t("save")}
+                </Button>
+                <Button
+                  key="reset"
+                  onClick={() => {
+                    systemConfig.setCatFileStorage({
+                      status: "unset",
+                      filesystem: "webdav",
+                      params: {},
+                    });
+                    setStatus("unset");
+                    setFilesystemParam({});
+                    setFilesystemType("webdav");
+                  }}
+                  type="primary"
+                  status="danger"
+                >
+                  {t("reset")}
+                </Button>
+                <Button
+                  key="open"
+                  type="secondary"
+                  onClick={async () => {
+                    try {
+                      let fs = await FileSystemFactory.create(fileSystemType, fileSystemParams);
+                      fs = await fs.openDir("ScriptCat/app");
+                      window.open(await fs.getDirUrl(), "_black");
+                    } catch (e) {
+                      Message.error(`${t("account_validation_failed")}: ${e}`);
+                    }
+                  }}
+                >
+                  {t("open_directory")}
+                </Button>
+              </FileSystemParams>
               {status === "unset" && <Typography.Text type="secondary">{t("not_set")}</Typography.Text>}
               {status === "success" && <Typography.Text type="success">{t("in_use")}</Typography.Text>}
               {status === "error" && <Typography.Text type="error">{t("storage_error")}</Typography.Text>}
diff --git a/src/pages/options/routes/Setting.tsx b/src/pages/options/routes/Setting.tsx
@@ -168,7 +168,7 @@ function Setting() {
             </Checkbox>
           </Space>
           <FileSystemParams
-            preNode={
+            headerContent={
               <Checkbox
                 checked={cloudSync.enable}
                 onChange={(checked) => {
@@ -178,29 +178,6 @@ function Setting() {
                 {t("enable_script_sync_to")}
               </Checkbox>
             }
-            actionButton={[
-              <Button
-                key="save"
-                type="primary"
-                onClick={async () => {
-                  // Save to the configuration
-                  // Perform validation if enabled
-                  if (cloudSync.enable) {
-                    Message.info(t("cloud_sync_account_verification")!);
-                    try {
-                      await FileSystemFactory.create(cloudSync.filesystem, cloudSync.params[cloudSync.filesystem]);
-                    } catch (e) {
-                      Message.error(`${t("cloud_sync_verification_failed")}: ${JSON.stringify(Logger.E(e))}`);
-                      return;
-                    }
-                  }
-                  submitCloudSync();
-                  Message.success(t("save_success")!);
-                }}
-              >
-                {t("save")}
-              </Button>,
-            ]}
             fileSystemType={cloudSync.filesystem}
             fileSystemParams={cloudSync.params[cloudSync.filesystem] || {}}
             onChangeFileSystemType={(type) => {
@@ -212,7 +189,29 @@ function Setting() {
                 params: { ...cloudSync.params, [cloudSync.filesystem]: params },
               }));
             }}
-          />
+          >
+            <Button
+              key="save"
+              type="primary"
+              onClick={async () => {
+                // Save to the configuration
+                // Perform validation if enabled
+                if (cloudSync.enable) {
+                  Message.info(t("cloud_sync_account_verification")!);
+                  try {
+                    await FileSystemFactory.create(cloudSync.filesystem, cloudSync.params[cloudSync.filesystem]);
+                  } catch (e) {
+                    Message.error(`${t("cloud_sync_verification_failed")}: ${JSON.stringify(Logger.E(e))}`);
+                    return;
+                  }
+                }
+                submitCloudSync();
+                Message.success(t("save_success")!);
+              }}
+            >
+              {t("save")}
+            </Button>
+          </FileSystemParams>
         </Space>
       </Card>
 
diff --git a/src/pages/options/routes/Tools.tsx b/src/pages/options/routes/Tools.tsx
