【问题标题】:How to fix this error when using React Context使用 React Context 时如何修复此错误
【发布时间】:2019-09-21 13:02:24
【问题描述】:

我正在尝试在我的应用程序中实现 React-context 以摆脱道具钻探。在创建 contextProvider 时,我收到以下错误-
“元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:未定义。您可能忘记从定义它的文件中导出组件,或者您可能混合了设置默认和命名导入”。

const SharedThemeContext = React.createContext();

export class SharedThemeProvider extends Component {

  static propTypes = {
    children: PropTypes.func.isRequired
  }
  constructor(props) {
    super(props);

    this.state = {
      isOpen: false,
      message: '',
    };
  }

  openSnackbar = (message) => {
    this.setState({
      message,
      isOpen: true,
    });
  };

  closeSnackbar = () => {
    this.setState({
      message: '',
      isOpen: false,
    });
  };

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

    return (
      <SharedThemeContext.Provider
        value={{
          openSnackbar: this.openSnackbar,
          closeSnackbar: this.closeSnackbar,
          snackbarIsOpen: this.state.isOpen,
          message: this.state.message,
        }}
      >

        {children}
      </SharedThemeContext.Provider>
    );
  }
}

export const SharedThemeConsumer = SharedThemeContext.Consumer;

【问题讨论】:

  • 这就是我每次得到的......我尝试添加以下位,但仍然是同样的错误...... static propTypes = { children: PropTypes.node.isRequired }
  • 解决了错误-我的 app.js 中有snackbarprovider 作为snackbar

标签: themes material-ui react-context


【解决方案1】:

警告是否提供任何信息?

【讨论】:

    猜你喜欢
    • 2021-04-01
    • 2018-06-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-10-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多