发布正式版本

README.md

@@ -163,6 +163,71 @@ render(<BaseExample />);
 
 ```
 
+- 多层级显示
+- 父子组件嵌套使用不同语言包，子组件可共享父组件国际化资源
+- _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 (
+    <>
+      <FormattedMessage id="childrenMessage" />&<FormattedMessage id="hello" />
+    </>
+  );
+});
+
+const BaseExample = () => {
+  const [locale, setLocale] = useState('zh-CN');
+  return (
+    <IntlProvider locale={locale}>
+      <Flex gap={10}>
+        <Select
+          placeholder="请选择语言"
+          value={locale}
+          onChange={setLocale}
+          options={[
+            { value: 'zh-CN', label: '中文' },
+            { value: 'en-US', label: 'English' }
+          ]}
+        />
+        <FormattedMessage id="hello" />
+        <div>----------------</div>
+        <ChildrenComponent locale={locale} />
+      </Flex>
+    </IntlProvider>
+  );
+};
+
+render(<BaseExample />);
+
+```
+
 
 ### API
 

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"
+        }
+      ]
     }
   ]
 }

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 (
+    <>
+      <FormattedMessage id="childrenMessage" />&<FormattedMessage id="hello" />
+    </>
+  );
+});
+
+const BaseExample = () => {
+  const [locale, setLocale] = useState('zh-CN');
+  return (
+    <IntlProvider locale={locale}>
+      <Flex gap={10}>
+        <Select
+          placeholder="请选择语言"
+          value={locale}
+          onChange={setLocale}
+          options={[
+            { value: 'zh-CN', label: '中文' },
+            { value: 'en-US', label: 'English' }
+          ]}
+        />
+        <FormattedMessage id="hello" />
+        <div>----------------</div>
+        <ChildrenComponent locale={locale} />
+      </Flex>
+    </IntlProvider>
+  );
+};
+
+render(<BaseExample />);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kne/react-intl",
-  "version": "0.1.11-alpha.0",
+  "version": "0.1.12",
   "description": "快捷地创建国际化中需要使用到的组件",
   "syntax": {
     "esmodules": true

src/contex.js

@@ -0,0 +1,7 @@
+import { createContext } from '@kne/global-context';
+
+const { Provider, useContext, context } = createContext({});
+
+export { Provider, useContext };
+
+export default context;

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 (
-        <IntlProvider messages={messages} locale={locale}>
-          <WrappedComponents {...props} ref={ref} />
+        <IntlProvider messages={currentMessage} locale={locale}>
+          <MessageProvider value={currentMessage}>
+            <WrappedComponents {...props} ref={ref} />
+          </MessageProvider>
         </IntlProvider>
       );
     });