reactjs - 尝试渲染 Consumer 时，新的 React context API 和流程错误

Question

当我尝试渲染 Consumer 时，流程显示下一个错误:

[flow] Cannot create SidebarContextConsumer element because property changeOpenState is missing in undefined [1] in the first argument of property children. (References: [1])

这是我的代码:

// @flow
import React, { createContext } from 'react';

import type { Context, ProviderProps } from './Sidebar.types';

const SidebarContext = createContext();

export const SidebarContextConsumer = SidebarContext.Consumer;

/* eslint-disable react/no-unused-state */
export class SidebarContextProvider extends React.Component<ProviderProps, Context> {

  state = {
    dynamic: false,
    open: false,
    transition: false,
    changeDynamicMode: (dynamic: boolean) => {
      this.setState({
        dynamic,
        open: false,
        transition: false,
      });
    },
    changeOpenState: (open: boolean, transition: boolean = true) => {
      this.setState({ open, transition });
    },
  };

  render() {
    const { children } = this.props;

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

}
/* eslint-enable */

流程声明:

export type Context = {
  changeDynamicMode: (dynamic: boolean) => void,
  changeOpenState: (open: boolean, transition?: boolean) => void,
  dynamic: boolean,
  open: boolean,
  transition: boolean,
};

Answer 1

这似乎是一个known limitation流类型。

我通过以下方式解决了我的案例中的错误:

const SidebarContext: Object = createContext();