⚡️ Tabs 渲染优化补丁

components/Tabs.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react';
 
 /**
  * Tabs切换标签
@@ -6,59 +6,37 @@ import React, { useState } from 'react'
  * @returns
  */
 const Tabs = ({ className, children }) => {
-  const [currentTab, setCurrentTab] = useState(0)
+  const [currentTab, setCurrentTab] = useState(0);
 
-  if (!children) {
-    return <></>
+  const validChildren = children.filter(c => c);
+
+  if (validChildren.length === 0) {
+    return <></>;
   }
 
-  children = children.filter(c => c && c !== '')
-
-  let count = 0
-  children.forEach(e => {
-    if (e) {
-      count++
-    }
-  })
-
-  if (count === 0) {
-    return <></>
-  }
-
-  if (count === 1) {
-    return <section className={'duration-200 ' + className}>
-            {children}
-        </section>
-  }
-
-  function tabClickHandle(i) {
-    setCurrentTab(i)
-  }
-
-  return <div className={'mb-5 duration-200 ' + className}>
-        <ul className='flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600 overflow-auto'>
-            {children.map((item, index) => {
-              return <li key={index}
-                    className={(currentTab === index ? 'font-black border-b-2 border-red-600 text-red-600 animate__animated animate__jello ' : 'font-extralight cursor-pointer') + ' text-sm font-sans '}
-                    onClick={() => {
-                      tabClickHandle(index)
-                    }}>
-                    {item?.key}
-                </li>
-            })}
-        </ul>
-        <div>
-            {children.map((item, index) => {
-              return <section key={index}
-                    data-aos="fade-up"
-                    data-aos-duration="300"
-                    data-aos-once="true"
-                    data-aos-anchor-placement="top-bottom">
-                    {currentTab === index && item}
-                </section>
-            })}
-        </div>
+  return (
+    <div className={`mb-5 duration-200 ${className}`}>
+      <ul className="flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600 overflow-auto">
+        {validChildren.map((item, index) => (
+          <li key={index}
+            className={`${currentTab === index ? 'font-black border-b-2 border-red-600 text-red-600 animate__animated animate__jello' : 'font-extralight cursor-pointer'} text-sm font-sans`}
+            onClick={() => setCurrentTab(index)}>
+            {item.key}
+          </li>
+        ))}
+      </ul>
+      {/* 标签切换的时候不销毁 DOM 元素，使用 CSS 样式进行隐藏 */}
+      <div>
+        {validChildren.map((item, index) => (
+          <section
+            key={index}
+            className={`${currentTab === index ? 'opacity-100 static h-auto' : 'opacity-0 absolute h-0'}`}>
+            {item}
+          </section>
+        ))}
+      </div>
     </div>
-}
+  );
+};
 
-export default Tabs
+export default Tabs;