function action(context) { const { query } = context; return { component: <Admin query={query} />, }; }而在 umi 中,在函数组件里可以通过 useSearchParams 获取,例如:
function Admin() { const [searchParams, setSearchParams] = useSearchParams(); return <div>{searchParams.get('name')}<div> }在类组件里可以通过 createSearchParams 获取,例如:
class Admin extends React.Component { const searchParams = createSearchParams(window.location.search); render() { return <div>{searchParams.get('name')}<div> } }考虑到老项目里都是处理之后通过 props 传递给组件,则可以抽象成一个高阶组件,单独处理获取 URL 的查询字符串的逻辑,这样大部分组件都不需要进行改动,例如:高阶函数 WrappedComponent
const getSearchParams = () => { const searchParams = createSearchParams(window.location.search); if (!searchParams) return {} const params = {}; for (const [key, value] of searchParams.entries()) { params[key] = value; } return params; } export default function WrappedComponent(WrappedComponent) { return (props) => { const searchParams = getSearchParams() return <WrappedComponent {...props} {...searchParams} /> } } // 堆代码 duidaima.com class Admin extends React.Component { render() { return <div>{this.props.name}<div> } } export default WrappedComponent(Admin)如何配置国际化
import { Outlet } from 'umi'; import {ConfigProvider} from 'antd' import zhCN from "antd/locale/zh_CN"; export default function Layout() { return ( <ConfigProvider locale={zhCN}> <div> <Outlet /> </div> </ConfigProvider> ); }在这里有一点需要注意,因为在老项目里我使用的日期库是 moment,则还需要加上 moment 的国际化配置,例如:
import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn');
如果使用的 Ant Design 5.0 默认的 Day.js,则也需要进行相应的配置。
/* .umirc.ts */ export default defineConfig({ exportStatic: {}, })Ant Design 5.0 里的日期库自定义问题
/* .umirc.ts */ export default defineConfig({ chainWebpack: (config) => { config.plugin('moment-webpack-plugin').use(AntdMomentWebpackPlugin) return config }, mfsu: { // @ts-ignore chainWebpack(config) { config.plugin('moment-webpack-plugin').use(AntdMomentWebpackPlugin) return config }, }, })
在这里需要注意的是在 mfsu 里也同样要配置 chainWebpack,因为 mfsu 是默认开启的,不配置会导致无法替换成 Moment.js。
Ant Design 5.0 里的组件样式自定义问题<Upload listType="picture-card" accept="image/*" > </Upload>CSS 文件
.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select { width: 375px; height: 300px; } .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select > .ant-upload { display: block; }考虑到这个样式修改是全局性的,所以建议在这里增加 className="avatar-uploader"(可以是任何值),好处是避免污染全局样式
<Upload listType="picture-card" className="avatar-uploader" accept="image/*" > </Upload> .ant-upload-wrapper.ant-upload-picture-card-wrapper.avatar-uploader .ant-upload.ant-upload-select { width: 375px; height: 300px; } .ant-upload-wrapper.ant-upload-picture-card-wrapper.avatar-uploader .ant-upload.ant-upload-select > .ant-upload { display: block; }