溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“Remix怎么集成antd和pro-components”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
核心要注意的問題就是：
| 問題 | 說明 |
|---|---|
| 模塊（包） | 兼容性和 peer 依等問題 |
| ssr | Remix 服務端渲染支持問題 |
兼容性主要體現在 React18 和其他的包的兼容性
使用腳手架創建的項目默認使用 React 18,由此帶來兼容性問題？
React 18 api 發生了變化，渲染 api 調用是否手動修改為 React18 的方式？
npm 的 peer 依賴安裝與否？
其他的依賴的兼容 React 18 的問題？
我們知道 Remix 其實基于 esbuild 很多代碼都跑在服務端，所以服務端的渲染的注意點是我們要提前知道：
antd 支持服務端渲染
pro-components 不支持服務端渲染，一般用于客戶渲染，因為直接使用了 window/document 等客戶端才有的全局對象
remix-utils 工具包支持 <ClientOnly>{() => <>You Content</>}</ClientOnly> 使用組件僅僅在客戶端進行渲染。
pnpm dlx create-umi@latest [your_package_name] # remix 選擇默認的選項即可 pnpm install remix-utils antd @ant-design/pro-components @ant-design/cssinjs @ant-design/icons
remix.config.js
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
future: {
v2_routeConvention: true,
},
ignoredRouteFiles: ["**/.*"],
};import { createContext } from "react";
const SettingContext = createContext({
theme: {},
setTheme: (theme: any) => {}
});
export default SettingContext;全局配置放在 SettingContext 上下文中，需要修改和使用都基于此上下文。
// type
import type { MetaFunction } from "@remix-run/node";
// core
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
export const meta: MetaFunction = () => ({
charset: "utf-8",
title: "New Remix App",
viewport: "width=device-width,initial-scale=1",
});
function Document({
children,
title = "App title",
}: {
children: React.ReactNode;
title?: string;
}) {
return (
<html lang="en">
<head>
<Meta />
<title>{title}</title>
<Links />
{typeof document === "undefined" ? "__ANTD__" : ""}
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}
export default function App() {
return (
<Document>
<Outlet />
</Document>
);
}將 html 單獨的抽離一個 Document 組件，方便日后修改
在 Document 組建中增加 __ANTD__ 方便后期替換 antd 客戶端內容
客戶端主要配合： @ant-design/cssinjs
// cores
import { startTransition, useState } from "react";
import { hydrateRoot } from "react-dom/client";
import { RemixBrowser } from "@remix-run/react";
// components and others
import { createCache, StyleProvider } from "@ant-design/cssinjs";
import { ConfigProvider } from "antd";
// context
import SettingContext from "./settingContext";
const hydrate = () => {
startTransition(() => {
const cache = createCache();
function MainApp() {
const [theme, setTheme] = useState({
colorPrimary: "#00b96b"
});
return (
<SettingContext.Provider value={{ theme, setTheme }}>
<StyleProvider cache={cache}>
<ConfigProvider
theme={{
token: {
colorPrimary: theme.colorPrimary,
},
}}
>
<RemixBrowser />
</ConfigProvider>
</StyleProvider>
</SettingContext.Provider>
);
}
hydrateRoot(document, <MainApp />);
});
};
if (typeof requestIdleCallback === "function") {
requestIdleCallback(hydrate);
} else {
// Safari doesn't support requestIdleCallback
// https://caniuse.com/requestidlecallback
setTimeout(hydrate, 1);
}定義 theme, setTheme 給 SettingContext 使用控制 antd 配置變化，要說明的點 StyleProvider 是用于 antd 服務端渲染 配置, 而 ConfigProvider 是 antd 主題配置的提供者。
注意：React18 中不能使用 hydrateRoot api 來進行水合。
與 客戶端一樣需要 @ant-design/cssinjs 來配置 antd 的樣式。
// types
import type { EntryContext } from "@remix-run/node";
// core
import { useState } from "react";
import { RemixServer } from "@remix-run/react";
import { renderToString } from "react-dom/server";
// components
import { ConfigProvider } from "antd";
import { createCache, extractStyle, StyleProvider } from "@ant-design/cssinjs";
// context
import SettingContext from "./settingContext";
export default function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
const cache = createCache();
function MainApp() {
const [theme, setTheme] = useState({
colorPrimary: "#00b96b"
});
return (
<SettingContext.Provider value={{ theme, setTheme }}>
<StyleProvider cache={cache}>
<ConfigProvider
theme={{
token: {
colorPrimary: theme.colorPrimary,
},
}}
>
<RemixServer context={remixContext} url={request.url} />
</ConfigProvider>
</StyleProvider>
</SettingContext.Provider>
);
}
let markup = renderToString(<MainApp />);
const styleText = extractStyle(cache);
markup = markup.replace("__ANTD__", styleText);
responseHeaders.set("Content-Type", "text/html");
return new Response("<!DOCTYPE html>" + markup, {
status: responseStatusCode,
headers: responseHeaders,
});
}客戶端和服務端的改造中包含了：
markup = markup.replace("__ANTD__", styleText);
{typeof document === "undefined" ? "__ANTD__" : ""}__ANTD__ 在服務端環境中替換
/routes/_layout.tsx
// core
import { useContext } from "react";
import { Outlet } from "@remix-run/react";
// components
import { ClientOnly } from "remix-utils";
import { ProConfigProvider, SettingDrawer } from "@ant-design/pro-components";
// context
import SettingContext from "~/settingContext";
export default function Layout() {
const value = useContext(SettingContext);
return (
<ClientOnly fallback={<div>Loading...</div>}>
{() => (
<ProConfigProvider>
<Outlet />
<SettingDrawer
getContainer={() => document.body}
enableDarkTheme
onSettingChange={(settings: any) => {
value?.setTheme(settings);
}}
settings={{ ...value.theme }}
themeOnly
/>
</ProConfigProvider>
)}
</ClientOnly>
);
}注意：布局組件中使用有以下幾個點需要注意：
useContext 獲取當前的上下文
ClientOnly 組件用于僅僅在客戶端渲染 Remix 組件
ProConfigProvider 組件為 SettingDrawer/Outlet 組件提供上下文
SettingDrawer 給使用當前布局 _layout 的組件提供顏色等配置
// core
import { json } from "@remix-run/node";
import { useFetcher } from "@remix-run/react";
// components
import { Button, Form, Input, Select } from "antd";
export async function action() {
return json({
title: 1,
});
}
const { Option } = Select;
const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
};
const tailLayout = {
wrapperCol: { offset: 8, span: 16 },
};
export default function Index() {
const fetcher = useFetcher();
const [form] = Form.useForm();
const onGenderChange = (value: string) => {
switch (value) {
case "male":
form.setFieldsValue({ note: "Hi, man!" });
break;
case "female":
form.setFieldsValue({ note: "Hi, lady!" });
break;
case "other":
form.setFieldsValue({ note: "Hi there!" });
break;
default:
}
};
const onFinish = (value: any) => {
const formData = new FormData();
formData.append("username", value.username);
formData.append("password", value.password);
fetcher.submit(formData, { method: "post" });
};
const onReset = () => {
form.resetFields();
};
const onFill = () => {
form.setFieldsValue({ note: "Hello world!", gender: "male" });
};
return (
<div>
<Form
{...layout}
form={form}
name="control-hooks"
onFinish={onFinish}
style={{ maxWidth: 600 }}
>
<Form.Item name="note" label="Note" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item name="gender" label="Gender" rules={[{ required: true }]}>
<Select
placeholder="Select a option and change input text above"
onChange={onGenderChange}
allowClear
>
<Option value="male">male</Option>
<Option value="female">female</Option>
<Option value="other">other</Option>
</Select>
</Form.Item>
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.gender !== currentValues.gender
}
>
{({ getFieldValue }) =>
getFieldValue("gender") === "other" ? (
<Form.Item
name="customizeGender"
label="Customize Gender"
rules={[{ required: true }]}
>
<Input />
</Form.Item>
) : null
}
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
Submit
</Button>
<Button htmlType="button" onClick={onReset}>
Reset
</Button>
<Button type="link" htmlType="button" onClick={onFill}>
Fill form
</Button>
</Form.Item>
</Form>
</div>
);
}_layout._index.tsx 表示使用：_layout 布局的 / 頁面路由。
// core
import { json } from "@remix-run/node";
import { useFetcher } from "@remix-run/react";
// components
import { Button, Form, Space } from "antd";
import {
ProForm,
ProFormDependency,
ProFormSelect,
ProFormText,
} from "@ant-design/pro-components";
export async function action() {
return json({
title: 1,
});
}
const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
};
const tailLayout = {
wrapperCol: { offset: 8, span: 16 },
};
export default function Index() {
const fetcher = useFetcher();
const [form] = Form.useForm();
const onGenderChange = (value: string) => {
switch (value) {
case "male":
form.setFieldsValue({ note: "Hi, man!" });
break;
case "female":
form.setFieldsValue({ note: "Hi, lady!" });
break;
case "other":
form.setFieldsValue({ note: "Hi there!" });
break;
default:
}
};
const onFinish = (value: any) => {
const formData = new FormData();
formData.append("username", value.username);
formData.append("password", value.password);
fetcher.submit(formData, { method: "post" });
};
const onReset = () => {
form.resetFields();
};
const onFill = () => {
form.setFieldsValue({ note: "Hello world!", gender: "male" });
};
return (
<div>
<Form
{...layout}
form={form}
name="control-hooks"
onFinish={onFinish}
style={{ maxWidth: 600 }}
>
<ProFormText name="note" label="Note" rules={[{ required: true }]} />
<ProFormSelect
name="gender"
label="Gender"
rules={[{ required: true }]}
fieldProps={{
onChange: onGenderChange
}}
options={[
{
label: "male",
value: "male",
},
{
label: "female",
value: "female",
},
{
label: "other",
value: "other",
},
]}
/>
<ProFormDependency name={["gender"]}>
{({ gender }) => {
return gender === "other" ? (
<ProFormText
noStyle
name="customizeGender"
label="Customize Gender"
rules={[{ required: true }]}
/>
) : null;
}}
</ProFormDependency>
<ProForm.Item {...tailLayout}>
<Space>
<Button type="primary" htmlType="submit">
Submit
</Button>
<Button htmlType="button" onClick={onReset}>
Reset
</Button>
<Button type="link" htmlType="button" onClick={onFill}>
Fill form
</Button>
</Space>
</ProForm.Item>
</Form>
</div>
);
}/procomponents 頁面基本是 / 頁面使用 pro-components 的改造版本。需要我們注意的是 表單聯動 使用用方式不一樣。
“Remix怎么集成antd和pro-components”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
