[英]React alert Uncaught Invariant Violation
我在安装react-alert时遇到了一些问题,它显示的错误就像
react-dom.development.js:55 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {$$typeof, render}). If you meant to render a collection of children, use an array instead.
所以我在cmd中运行命令npm install react-alert react-alert-template-basic react-transition-group
这就是我的App.js的样子。
import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
import { Provider as AlertProvider } from 'react-alert';
import AlertTemplate from 'react-alert-template-basic';
import Header from './layout/Header';
import Dashboard from './leads/Dashboard';
import Alerts from './layout/Alerts';
import { Provider } from 'react-redux';
import store from '../store';
const alertOptions = {
timeout: 3000,
position: "top center"
};
class App extends Component {
render() {
return (
<Provider store={store}>
<AlertProvider template={AlertTemplate} {...alertOptions}>
<Fragment>
<Header />
<Alerts />
<div className="container">
<Dashboard />
</div>
</Fragment>
</AlertProvider>
</Provider>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
我添加了组件Alers.js,它看起来像。
import React, { Component, Fragment } from 'react';
import { withAlert } from 'react-alert';
export class Alerts extends Component {
componentDidMount() {
this.props.alert.show("It works");
}
render() {
return <Fragment />;
}
}
export default withAlert(Alerts);
所以在Alert.js中,我添加了componentDidMount()来测试这是否有效(显然不是)。 如果我从App.js中删除<Alerts />
,我没有任何错误,但警报不能以这种方式工作。
您应该像这样导入您的组件以使用withAlert
HOC:
export default withAlert()(Alerts);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.