Reactjs 跨多个包使用（特别是）ReactContext使用者

上下文 我创建了一个上下文并导出了生产者和消费者。我现在用Producer包装我的应用程序级示例。我希望能够在一个由不同包提供服务的模块内使用ContextConsumer

然而，当我试图在这样的模块中使用ContextConsumer时，它抛出了一个错误，

无法调用undefined的函数

代码结构
下面是我的代码结构

Context-v1软件包

<Portal>
        <Transition
          enterClassName={`${prefix}--slideIn`}
          transition={open ? transitions.enter : transitions.exit}
          onEntered={onShow}
          onExited={onClose}
          exitClassName={`${prefix}--slideOut`}
          unmountOnExit
        >
          <IDSContextConsumer>
            {
              (context) => (
                <ZIndex
                  assignZIndex={open}
                  underlay
                  getTopZindex={context.incrementTopZIndex}
                >
                  <div
                    className={open ? 'divContainerWithUnderlay' : ''}
                  >
                    {
                      open &&
                      <div>
                        <h1 className="divContent">{title}</h1>
                        {
                          this.props.children ? this.props.children : null
                        }
                        <button className="divRenderButton" onClick={this.closeModalDialog}>Close Modal</button>
                      </div>
                    }
                  </div>
                </ZIndex>
              )
            }
          </IDSContextConsumer>
        </Transition>
      </Portal>

Context.js

import React, { Component, createContext } from 'react';
import PropTypes from 'prop-types';
import ZIndexUtils from './zIndexUtils';

const { node } = PropTypes;
const { Provider, Consumer: IDSContextConsumer } = createContext();

class IDSContextProvider extends Component {
  static propTypes = {
    children: node.isRequired
  };

  state = {
    topZIndex: ZIndexUtils.getTopZIndex(),
    incrementTopZIndex: ZIndexUtils.incrementTopZIndex
  };

  render() {
    return (
      <Provider
        value={{
          topZIndex: this.state.topZIndex,
          incrementTopZIndex: this.state.incrementTopZIndex
        }}
      >
        {this.props.children}
      </Provider>
    );
  }
}

export { IDSContextProvider };

export default IDSContextConsumer;

import IDSContextConsumer, { IDSContextProvider } from './Context';

export {
  IDSContextProvider,
  IDSContextConsumer
};

下拉式v1软件包
这个组件使用了另一个名为Menu-v1的组件，在这里我试图使用Consumer来访问从应用程序级示例传递下来的增量函数

import { IDSContextConsumer } from '@ids/context-v1';
...
...
render() {
  return (
    <IDSContextConsumer>
      {
        (context) => (
          <ZIndex assignZIndex getTopZindex={context.incrementTopZIndex}>
            <MenuList
              className={className}
              autoFocus={autoFocus}
              aria-label={this.props['aria-label']}
              onKeyDown={this.handleKeyDown}
              onBlur={this.handleMenuBlur}
              reference={reference}
              ref={refReactDom}
              style={style}
            >
              {items}
            </MenuList>
          </ZIndex>
        )
      }
    </IDSContextConsumer>
  )
}

从'@ids/context-v1'导入{IDSContextConsumer}；
...
...
render（）{
返回(
{
（上下文）=>(
{items}
)
}
)
}

应用程序示例
最后，我尝试在我的应用程序中使用这个下拉模块。这就是我希望看到递增函数通过上下文传入的地方

从'@ids/context-v1'导入{IDSContextProvider}；
从'@ids/Dropdown'导入{Dropdown，MenuItem}

render() {
    return (
      <div>
        <IDSContextProvider>
          <Modal
            open={this.state.openModalDialog}
            onCloseModalDialog={this.handleModalClosing}
            title="Modal with Dropdown"
          >
            <Dropdown
              onBlur={() => console.log('Dropdown blurrrrr')}
              label="Name"
              value={this.state.value}
              onChange={this.handleDropdownChange}
            >
              <MenuItem value="1">Banana</MenuItem>
              <MenuItem value="2">Apple</MenuItem>
              <MenuItem value="3">Guava</MenuItem>
              <MenuItem value="4">Mango</MenuItem>
            </Dropdown>
          </Modal>
        </IDSContextProvider>
        <button className="divRenderButton" onClick={this.handleModalOpening}>Open Modal</button>
      </div>
    );
  }

render（）{
返回(
log（'Dropdown blurrrr'）}
label=“Name”
value={this.state.value}
onChange={this.handleDropdownChange}
>
香蕉
苹果
番石榴
芒果
开放模态
);
}

示例中的模态组件

<Portal>
        <Transition
          enterClassName={`${prefix}--slideIn`}
          transition={open ? transitions.enter : transitions.exit}
          onEntered={onShow}
          onExited={onClose}
          exitClassName={`${prefix}--slideOut`}
          unmountOnExit
        >
          <IDSContextConsumer>
            {
              (context) => (
                <ZIndex
                  assignZIndex={open}
                  underlay
                  getTopZindex={context.incrementTopZIndex}
                >
                  <div
                    className={open ? 'divContainerWithUnderlay' : ''}
                  >
                    {
                      open &&
                      <div>
                        <h1 className="divContent">{title}</h1>
                        {
                          this.props.children ? this.props.children : null
                        }
                        <button className="divRenderButton" onClick={this.closeModalDialog}>Close Modal</button>
                      </div>
                    }
                  </div>
                </ZIndex>
              )
            }
          </IDSContextConsumer>
        </Transition>
      </Portal>


{
（上下文）=>(
{
打开&&
{title}
{
this.props.children？this.props.children:null
}
闭合模态
}
)
}

请求在这方面给予真诚的帮助。我以前尝试过本论坛的解决方案，但找不到来自不同软件包的模块共享上下文的任何方法。
无法调用未定义的函数-请提供准确的错误消息，我相信您误解了它。请提供，这是SO问题所必需的。该问题包含许多可能被跳过的无关代码。像Stackblitz或Codesandbox这样的工作演示将增加解决问题的机会。多个包的情况是不相关的。不管有多少包，只要出口和进口是正确的。本地模块也是如此。