我在安装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 />
,则不会出现任何错误,但警报无法以这种方式工作。
答案 0 :(得分:0)
您应该像这样导入组件,以便使用withAlert
HOC:
export default withAlert()(Alerts);