react-jss书写样式 与 react-intl 国际化的使用 与 classnames 动态css的使用

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 (
    <ConfigProvider
      locale={antdLocaleMap[locale]}
      input={{ autoComplete: "off" }}
      xIconScriptUrl="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_8160_209.08f1062f4a001cebbfacb0ef5b20213f.js"
    >
      <IntlProvider
        locale={locale}
        defaultLocale={locale}
        messages={messages}
        onError={(e) => {}}
      >
        <BrowserRouter>
          <CacheSwitch>
            {routes.map((route: IRoute) =>
              route.noCache ? (
                <Route key={`${route.path}`} {...route} />
              ) : (
                <CacheRoute
                  key={`${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 })}>
      <div
        className={classNames(props.className, isMulti ? classes.textMulti : classes.text)}
        ref={ref}
      >
        {props.text}
      </div>
    </div>
  );
}