我正在使用ReactJS和React-Router构建SPA。应用程序是我的主要组件,其他一切都源于此。在那个组件上,我添加了一个ToastContainer,它可以从该组件中正常工作。我已将该函数传递给子组件,希望他们可以调用并显示消息。当我试着虽然我得到了
Uncaught TypeError: Cannot read property 'toastContainer' of undefined
应用程序/主要组件
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexRoute, browserHistory, hashHistory } from 'react-router';
import ParameterContainer from './components/parameter/parameter-container';
import ParameterValueContainer from './components/parameter/parameter-value-container';
import NavMenu from './components/navigation/nav-menu';
import {Alert} from 'react-bootstrap';
import ReactToastr from 'react-toastr';
import {ToastContainer, ToastMessage} from 'react-toastr';
let ToastMessageFactory = React.createFactory(ToastMessage.animation);
// Main component and root component
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
userId: null,
roles: null,
parameterTypes: {
'STRING': 'STRING',
'BOOLEAN': 'BOOLEAN',
'INTEGER': 'INTEGER',
'DECIMAL': 'DECIMAL'
},
parameterGroups: {
1: 'POS',
2: 'MenuStructure'
}
};
}
componentDidMount() {
//this.addAlert('Success', 'Parameter Created');
this.addErrorAlert('Ohhhh snap!', 'You messed up Rodney, you messed up bad!');
}
addAlert(title, message) {
this.refs.toastContainer.success(
title,
message,
{
timeOut: 10000,
extendedTimeOut: 10000,
preventDuplicates: true,
positionClass: "toast-bottom-full-width",
showMethod: "fadeIn",
hideMethod: "fadeOut"
}
);
}
addErrorAlert(title, message) {
this.refs.toastContainer.error(
message,
title,
{
timeOut: 10000,
extendedTimeOut: 10000,
preventDuplicates: true,
positionClass: "toast-bottom-full-width",
showMethod: "fadeIn",
hideMethod: "fadeOut"
}
);
}
render() {
return (
<div>
<NavMenu />
<div className="container-fluid">
{React.Children.map(
this.props.children,
child => React.cloneElement(child,
{
parentState: this.state,
path: this.props.route.path,
alertCallback: this.addErrorAlert
})
)}
<ToastContainer ref="toastContainer" toastMessageFactory={ToastMessageFactory} className="toast-bottom-full-width">
</ToastContainer>
</div>
</div>
)
}
}
// page for 404
class NoMatch extends React.Component {
render() {
return (
<div className="container">
<Alert bsStyle="danger">
<h1>404: Not Found</h1>
<h3>The requested resource does not exist!</h3>
</Alert>
<img src="images/404.png" style={{display: 'block', margin: '0 auto', width: 300, height: '*'}} />
</div>
)
}
}
// render the application
ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="parameter" component={ParameterContainer} />
<Route path="parametervalues" component={ParameterValueContainer} />
<Route path="*" component={NoMatch}/>
</Route>
</Router>
), document.getElementById('react'))
我在子组件中使用这样的回调
componentDidMount() {
this.props.alertCallback("OHHHH NOOOO!!!!", "Something has gone wrong!");
this.fetchFromApi();
}
在你提到它在App / Container中工作之后,我建议你在你的构造函数中绑定你的函数,所以它看起来像:
constructor(props) {
super(props);
this.state = {
userId: null,
roles: null,
parameterTypes: {
'STRING': 'STRING',
'BOOLEAN': 'BOOLEAN',
'INTEGER': 'INTEGER',
'DECIMAL': 'DECIMAL'
},
parameterGroups: {
1: 'POS',
2: 'MenuStructure'
}
};
this.addErrorAlert = this.addErrorAlert.bind(this);
}
这应该解决你的问题,让我知道它是否有效。
如果您想了解有关事件处理的更多信息,请阅读此documentation。在那里,您将找到解释为什么需要绑定每个事件处理程序。