reactjs - 为什么在 Electron 应用程序中 React Context API 行为异常？

Question

我在我的电子应用程序中使用 React Context API，但似乎消费者正在从上下文的初始创建中获取默认值，而不是提供者提供的值。

context.js

import createReactContext from 'create-react-context';

export const LayoutContext = createReactContext({
  isMobile: false,
  toggleSidebar: () => undefined,
});

layout-provider.jsx

export default class LayoutProvider extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isMobile: false,
      toggleSidebar: this.toggleSidebar,
    };
  }

  toggleSidebar = (isOpen) => {
    this.setState((prevState) => ({
      isSidebarOpen: _isBoolean(isOpen) ? isOpen : !prevState.isSidebarOpen
    }));
  };

  render() {
    return (
      <LayoutContext.Provider value={this.state}>
        {this.props.children}
      </LayoutContext.Provider>
    );
  }
}

consumer.jsx

..
<LayoutContext.Consumer>
  {(layoutContext) => <Menu {...props} {...layoutContext} />
  }
</LayoutContext.Consumer>
...

menu.jsx

...
handleToggle = (evt) => {
  evt.preventDefault();
  this.props.toggleSidebar();
};

render() {
  return(
   ...
    <a href='#'
       onClick={this.handleToggle}
    </a>
    ...
  );
}

app.jsx

render() {
...
  <LayoutProvider>
    <Menu />
  </LayoutProvider>
...
}

然而，在消费者中，我看到toggleSidebar返回未定义。

相同的代码在 Web 应用程序中工作（即，toggleSidebar 来自 Provider 组件），但在 Electron 中，我看到了这种差异。

标签： reactjselectronreact-context