【发布时间】: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