react-jss的使用

• 实现组件化样式、动态样式、避免样式冲突

npm install react-jss
yarn add react-jss

// 使用
import React from 'react';
import { createUseStyles } from 'react-jss';const useStyles = createUseStyles({myButton: {color: 'green',margin: {top: 5,right: 0,bottom: 5,left: 0,},'& span': {fontWeight: 'bold',},},
});function MyComponent() {const classes = useStyles();return <button className={classes.myButton}>Submit<span>Button</span></button>;
}

react-intl 国际化的使用

yarn add react-intl -S
npm i react-intl -S
npm i localforage

App.tsx

// antd之中的配置 中英文
import { ConfigProvider } from "antd";
import enUS from "antd/lib/locale/en_US";
import zhCN from "antd/lib/locale/zh_CN";import { IntlProvider } from "react-intl";
import CacheRoute, { CacheSwitch } from "react-router-cache-route";
import { BrowserRouter, Route } from "react-router-dom";
import type { IRoute } from "./router/index";
import { useEffect, useRef, useState } from "react";const antdLocaleMap = {"en-US": enUS,"zh-CN": zhCN,
};const App = () => {const [locale, setLocale] = useState(localStorage.getItem("locale") || "zh-CN");const [messages, setMessages] = useState < any > {};const i18nStore = useRef(localForage.createInstance({name: "i18n",}));useEffect(() => {i18nStore.current.getItem(locale).then((res: any) => {setMessages(res);});}, [i18nStore, locale]);return (<ConfigProviderlocale={antdLocaleMap[locale]}input={{ autoComplete: "off" }}xIconScriptUrl="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_8160_209.08f1062f4a001cebbfacb0ef5b20213f.js"><IntlProviderlocale={locale}defaultLocale={locale}messages={messages}onError={(e) => {}}><BrowserRouter><CacheSwitch>{routes.map((route: IRoute) =>route.noCache ? (<Route key={`${route.path}`} {...route} />) : (<CacheRoutekey={`${route.path}`}multiple={20}cacheKey={`${route.path}`}when="always"{...route}/>))}</CacheSwitch></BrowserRouter></IntlProvider></ConfigProvider>);
};export default App;

IntlProvider 配置

• IntlProvider 有三个配置参数：
  • locale, , 语言标记，例如 ‘zh-CN’ ‘en-US’
  • messages, , 国际化所需的 key-value 对象
  • formats, , 自定义 format，比如日期格式、货币等

ConfigProvider组件

在ConfigProvider组件中，input和xIconScriptUrl参数用于配置全局的输入框（input）和关闭图标（xIcon）的相关属性。input参数用于配置全局的输入框（input）的默认属性。通过设置该参数，你可以在整个应用中统一配置输入框的默认属性，例如大小、前缀、后缀等。xIconScriptUrl参数用于配置全局的关闭图标（xIcon）的默认图标。通过设置该参数，你可以在整个应用中统一配置关闭图标的默认图标。

/router/index

import type { RouteProps } from "react-router-dom";export interface IRoute extends RouteProps {noCache?: boolean;
}export default [{exact: true,path: "/path",component: require("@/pages/path").default,},
];

locales

locales / zh.json || en.json

// en.json
{"删除": "Delete"
}// zh.json
{"删除": "删除"
}

组件中使用 国际化

import { useIntl } from 'react-intl';export default () => {const { formatMessage } = useIntl();return (<div>{formatMessage({ id: '删除' }),}</div>)
}

classnames 动态css的使用

npm i classnames

import classNames from 'classnames';
import { createUseStyles } from 'react-jss';const useEllipsisTextStyle = createUseStyles({wrapper: {display: 'flex',alignItems: 'flex-start',justifyContent: 'space-between'},wrapperConstrain: {width: 'calc(100% - 42px)'},text: {overflow: 'hidden'},textMulti: {whiteSpace: 'break-spaces',wordWrap: 'break-word',width: 'calc(100% - 42px)'},
});export const EllipseText = (props: { text: string; className: string }) => {
const classes = useEllipsisTextStyle();return (<div className={classNames({ [classes.wrapper]: true, [classes.wrapperConstrain]: showMore })}><divclassName={classNames(props.className, isMulti ? classes.textMulti : classes.text)}ref={ref}>{props.text}</div></div>);
}