docs: Update hooks description (#21279)

* docs: Update notification faq

* patch faq in Modal

components/modal/index.en-US.md

@@ -125,3 +125,27 @@ React.useEffect(() => {
 
 return <div>{contextHolder}</div>;
 ```
+
+## FAQ
+
+### Why I can not access context, redux in Modal.xxx?
+
+antd will dynamic create React instance by `ReactDOM.render` when call Modal methods. Whose context is different with origin code located context.
+
+When you need context info (like ConfigProvider context), you can use `Modal.useModal` to get `modal` instance and `contextHolder` node. And put it in your children:
+
+```tsx
+const [modal, contextHolder] = Modal.useModal();
+
+return (
+  <Context1.Provider value="Ant">
+    {/* contextHolder is in Context1 which mean modal will not get context of Context1 */}
+    {contextHolder}
+    <Context2.Provider value="Design">
+      {/* contextHolder is out of Context2 which mean modal will not get context of Context2 */}
+    </Context2.Provider>
+  </Context1.Provider>
+);
+```
+
+**Note:** You must insert `contextHolder` into your children with hooks. You can use origin method if you do not need context connection.

components/modal/index.zh-CN.md

@@ -127,3 +127,27 @@ React.useEffect(() => {
 
 return <div>{contextHolder}</div>;
 ```
+
+## FAQ
+
+### 为什么 Modal 方法不能获取 context、redux 的内容？
+
+直接调用 Modal 方法，antd 会通过 `ReactDOM.render` 动态创建新的 React 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。
+
+当你需要 context 信息（例如 ConfigProvider 配置的内容）时，可以通过 `Modal.useModal` 方法会返回 `modal` 实体以及 `contextHolder` 节点。将其插入到你需要获取 context 位置即可：
+
+```tsx
+const [modal, contextHolder] = Modal.useModal();
+
+return (
+  <Context1.Provider value="Ant">
+    {/* contextHolder 在 Context1 内，它可以获得 Context1 的 context */}
+    {contextHolder}
+    <Context2.Provider value="Design">
+      {/* contextHolder 在 Context2 外，因而不会获得 Context2 的 context */}
+    </Context2.Provider>
+  </Context1.Provider>
+);
+```
+
+**异同：**通过 hooks 创建的 `contextHolder` 必须插入到子元素节点中才会生效，当你不需要上下文信息时请直接调用。

components/notification/index.en-US.md

@@ -69,9 +69,9 @@ notification.config({
 
 ## FAQ
 
-### What's different between hooks and directly call?
+### Why I can not access context, redux in notification?
 
-antd will dynamic create React instance by `ReactDOM.render` when directly call notification methods. Whose context is different with origin code located context.
+antd will dynamic create React instance by `ReactDOM.render` when call notification methods. Whose context is different with origin code located context.
 
 When you need context info (like ConfigProvider context), you can use `notification.useNotification` to get `api` instance and `contextHolder` node. And put it in your children:
 
@@ -80,6 +80,7 @@ const [api, contextHolder] = notification.useNotification();
 
 return (
   <Context1.Provider value="Ant">
+    {/* contextHolder is in Context1 which mean api will not get context of Context1 */}
     {contextHolder}
     <Context2.Provider value="Design">
       {/* contextHolder is out of Context2 which mean api will not get context of Context2 */}

components/notification/index.zh-CN.md

@@ -70,7 +70,7 @@ notification.config({
 
 ## FAQ
 
-### hooks 和直接调用的区别是什么？
+### 为什么 notification 不能获取 context、redux 的内容？
 
 直接调用 notification 方法，antd 会通过 `ReactDOM.render` 动态创建新的 React 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。
 
@@ -81,9 +81,10 @@ const [api, contextHolder] = notification.useNotification();
 
 return (
   <Context1.Provider value="Ant">
+    {/* contextHolder 在 Context1 内，它可以获得 Context1 的 context */}
     {contextHolder}
     <Context2.Provider value="Design">
-      {/* contextHolder 在 Context2 外，因而不会获得此 context */}
+      {/* contextHolder 在 Context2 外，因而不会获得 Context2 的 context */}
     </Context2.Provider>
   </Context1.Provider>
 );