zihluwang
861852961f
These files were already out of step with the project's Prettier config before this branch of work; running `pnpm format` finally swept them up. No semantic changes. Kept separate from the functional commits so the reformatting does not bury them in diff noise.
76 lines
1.9 KiB
Markdown
76 lines
1.9 KiB
Markdown
---
|
|
title: 前端开发技巧与方案速查手册
|
|
tags:
|
|
- frontend
|
|
- react
|
|
- ant-design
|
|
- tailwind
|
|
- best-practice
|
|
author:
|
|
name: Zihlu Wang
|
|
email: real@zihluwang.me
|
|
---
|
|
|
|
## 表单组件的解耦
|
|
|
|
将表单组件拆分为 UI 组件和逻辑组件，并在逻辑组件中使用 UI 组件渲染样式。
|
|
|
|
## React 入口组件顺序
|
|
|
|
```tsx
|
|
import { StrictMode } from "react"
|
|
import { createRoot } from "react-dom/client"
|
|
import { Provider as ReduxProvider } from "react-redux"
|
|
import { PersistGate } from "redux-persist/integration/react"
|
|
import { RouterProvider } from "react-router"
|
|
import { App as AntApp, ConfigProvider as AntConfigProvider } from "antd"
|
|
import { StyleProvider } from "@ant-design/cssinjs"
|
|
import AntSimplifiedChinese from "antd/locale/zh_CN"
|
|
import "./index.css"
|
|
import "@/config/dayjs-config"
|
|
import store, { persistor } from "@/store"
|
|
import router from "@/router"
|
|
|
|
createRoot(document.getElementById("root")!).render(
|
|
<StrictMode>
|
|
<ReduxProvider store={store}>
|
|
<PersistGate loading={null} persistor={persistor}>
|
|
{/* 注意：StyleProvider 必须是 ConfigProvider 的父组件！！！ */}
|
|
<StyleProvider layer>
|
|
<AntConfigProvider
|
|
locale={AntSimplifiedChinese}
|
|
button={{
|
|
autoInsertSpace: false,
|
|
}}>
|
|
<AntApp className="h-full w-full">
|
|
<RouterProvider router={router} />
|
|
</AntApp>
|
|
</AntConfigProvider>
|
|
</StyleProvider>
|
|
</PersistGate>
|
|
</ReduxProvider>
|
|
</StrictMode>
|
|
)
|
|
```
|
|
|
|
## React 中 Ant Design 与 Tailwind 整合
|
|
|
|
> 参考 [https://github.com/ant-design/ant-design/discussions/56152](https://github.com/ant-design/ant-design/discussions/56152)
|
|
|
|
```css
|
|
/* index.css */
|
|
|
|
@layer theme, base, antd, components, utilities;
|
|
@import "tailwindcss";
|
|
```
|
|
|
|
```tsx
|
|
<StyleProvider>
|
|
<ConfigProvider>
|
|
<App>
|
|
<RouterProvider />
|
|
</App>
|
|
</ConfigProvider>
|
|
</StyleProvider>
|
|
```
|