react.js - 为什么需要插入 contextHolder 节点才能获取上下文？

Question

为什么 Modal 方法不能获取 context、redux、的内容和 ConfigProvider locale/prefixCls/theme 等配置？

直接调用 Modal 方法，antd 会通过 ReactDOM.render 动态创建新的 React 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。

当你需要 context 信息（例如 ConfigProvider 配置的内容）时，可以通过 Modal.useModal 方法会返回 modal 实体以及 contextHolder 节点。将其插入到你需要获取 context 位置即可：

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 必须插入到子元素节点中才会生效，当你不需要上下文信息时请直接调用。

为啥要插入 contextHolder 节点才能 获取上下文呢？

有没有react大佬解答下

Answer 1

这个问题涉及到 React 和 Ant Design 的 Modal 组件的上下文（context）管理。在 React 中，上下文（context）是一种让数据在组件树中流动的方式，而无需通过 props 手动向下传递。在 Ant Design 的 Modal 组件中，当你直接调用 Modal 方法时，antd 会通过 ReactDOM.render 动态创建新的 React 实体，这个实体的上下文与当前代码所在的上下文是不同的，因此无法获取当前的上下文信息，包括 ConfigProvider、redux、context 等内容。

为了解决这个问题，Ant Design 的 Modal 组件提供了 useModal hook，通过这个 hook 可以获取到 Modal 的实例以及一个 contextHolder 节点。这个 contextHolder 节点的作用是持有当前的上下文信息，以便在需要的时候获取。

当你需要获取上下文信息时，可以将 contextHolder 节点插入到需要获取上下文信息的组件中。例如，如果你需要在 Modal 组件中使用 ConfigProvider 提供的配置信息，你可以将 contextHolder 插入到 ConfigProvider 组件的子元素中，这样就可以获取到 ConfigProvider 提供的上下文信息了。

总结一下，插入 contextHolder 节点是为了获取当前的上下文信息，而直接调用 Modal 方法会创建一个新的实体，其上下文与当前代码所在的上下文不同，因此无法获取当前的上下文信息。通过 useModal hook 可以获取到 Modal 的实例以及 contextHolder 节点，从而解决这个问题。