tcym-react-libs

介绍

tcym-react-libs 是一个用于 react 的组件库，包含了常用的组件和工具函数。

软件架构

react + typescript + vite css 样式使用 sass 预处理器

编译教程

    # 安装依赖
    npm i 
    # 编译
    npm run build
    # 运行
    npm run dev
    # 发布
    npm publish

react 支持版本

"react": ">=18.0.0"

组件列表

• ResponsiveContainer - 响应式容器组件

ResponsiveContainer 组件Dome

import { ResponsiveContainer } from 'tcym-react-libs';
const App = () => {
  const layout = {
      xs: { maxWidth: 575 },
      sm: { minWidth: 576, maxWidth: 767 },
      md: { minWidth: 768, maxWidth: 1064 },
      lg: { minWidth: 1065, maxWidth: 1199 },
      xl: { minWidth: 1200, maxWidth: 1600 },
      xxl: { minWidth: 1601 }
    } 
  return (
    <ResponsiveContainer layout={layout} style={{ width: '100%', height: '100%' }}>
        {breakpoint => (
        <div style={{ padding: '20px', backgroundColor: '#f0f0f0' }}>
            <h1>当前断点：{breakpoint}</h1>
            <p>根据屏幕宽度自动调整布局。</p>
        </div>
        )}
    </ResponsiveContainer>
  )
}

KeepAlive 组件Dome

// 路由配置文件
import { KeepAlive } from 'tcym-react-libs';
<KeepAliveContainer include={[/^\/(list|detail)/]} max={5}>
  <Routes>
    <Route path="/list" element={<KeepAlive><ListPage /></KeepAlive>} />
    <Route path="/detail" element={<KeepAlive><DetailPage /></KeepAlive>} />
    <Route path="/login" element={<LoginPage />} />
  </Routes>
</KeepAliveContainer>

KeepAlive 组件

KeepAlive 组件用于缓存路由组件的状态，避免在切换路由时重新渲染。它可以通过 include 属性指定需要缓存的路由。

KeepAlive 组件Dome

import { KeepAlive } from 'tcym-react-libs';
function TabsExample() {
  const [tab, setTab] = useState("a")

  return (
    <KeepAliveContainer>
      <button onClick={() => setTab("a")}>Tab A</button>
      <button onClick={() => setTab("b")}>Tab B</button>

      <KeepAlive cacheKey="tabA" active={tab === "a"}>
        <TabA />
      </KeepAlive>

      <KeepAlive cacheKey="tabB" active={tab === "b"}>
        <TabB />
      </KeepAlive>
    </KeepAliveContainer>
  )
}