diff --git a/README.md b/README.md index 4fc5bed..1203a09 100644 --- a/README.md +++ b/README.md @@ -163,6 +163,71 @@ render(); ``` +- 多层级显示 +- 父子组件嵌套使用不同语言包,子组件可共享父组件国际化资源 +- _ReactIntl(@kne/current-lib_react-intl)[import * as _ReactIntl from "@kne/react-intl"],antd(antd) + +```jsx +const { createIntlProvider, FormattedMessage, createWithIntlProvider } = _ReactIntl; +const { Select, Flex } = antd; +const { useState } = React; + +const IntlProvider = createIntlProvider({ + defaultLocale: 'zh-CN', + messages: { + 'zh-CN': { + hello: '你好,世界!' + }, + 'en-US': { + hello: 'Hello, world!' + } + } +}); + +const ChildrenComponent = createWithIntlProvider({ + defaultLocale: 'zh-CN', + messages: { + 'zh-CN': { + childrenMessage: '我是子组件显示信息' + }, + 'en-US': { + childrenMessage: 'I am the child component displaying information.' + } + } +})(() => { + return ( + <> + & + + ); +}); + +const BaseExample = () => { + const [locale, setLocale] = useState('zh-CN'); + return ( + + + + +
----------------
+ +
+
+ ); +}; + +render(); diff --git a/package.json b/package.json index 4174f53..8ab1b4d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kne/react-intl", - "version": "0.1.11-alpha.0", + "version": "0.1.12", "description": "快捷地创建国际化中需要使用到的组件", "syntax": { "esmodules": true diff --git a/src/contex.js b/src/contex.js new file mode 100644 index 0000000..e5d006f --- /dev/null +++ b/src/contex.js @@ -0,0 +1,7 @@ +import { createContext } from '@kne/global-context'; + +const { Provider, useContext, context } = createContext({}); + +export { Provider, useContext }; + +export default context; diff --git a/src/createWithFetchLang.js b/src/createWithFetchLang.js index 95415e5..a3fb8bf 100644 --- a/src/createWithFetchLang.js +++ b/src/createWithFetchLang.js @@ -1,8 +1,9 @@ import Fetch from '@kne/react-fetch'; import { useGlobalValue, usePreset } from '@kne/global-context'; import localeLoader, { messagesLoader, message } from './loader'; -import { IntlProvider } from 'react-intl'; +import { IntlProvider, useIntl } from 'react-intl'; import React, { forwardRef } from 'react'; +import { Provider as MessageProvider, useContext as useMessageContext } from './contex'; const argsParse = (...args) => { if (typeof args[0] === 'object' && typeof args[0].defaultLocale === 'string') { @@ -41,10 +42,13 @@ const createWithFetchLang = (...args) => { /> ); } - + const prevMessage = useMessageContext(); + const currentMessage = Object.assign({}, prevMessage, messages); return ( - - + + + + ); });