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();
+
+```
+
### API
diff --git a/doc/example.json b/doc/example.json
index 0d1f8e9..8e8635a 100644
--- a/doc/example.json
+++ b/doc/example.json
@@ -36,6 +36,22 @@
"packageName": "@kne/remote-loader"
}
]
+ },
+ {
+ "title": "多层级显示",
+ "description": "父子组件嵌套使用不同语言包,子组件可共享父组件国际化资源",
+ "code": "./multi-level.js",
+ "scope": [
+ {
+ "name": "_ReactIntl",
+ "packageName": "@kne/current-lib_react-intl",
+ "importStatement": "import * as _ReactIntl from \"@kne/react-intl\""
+ },
+ {
+ "name": "antd",
+ "packageName": "antd"
+ }
+ ]
}
]
}
diff --git a/doc/multi-level.js b/doc/multi-level.js
new file mode 100644
index 0000000..f6599ab
--- /dev/null
+++ b/doc/multi-level.js
@@ -0,0 +1,57 @@
+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 (
-
-
+
+
+
+
);
});