Javascript 对所有消息使用单个React Toastr容器

我正在使用ReactJS和ReactRouter构建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'))

---

在您提到它在应用程序/容器中工作后，我建议您将函数绑定到构造函数中，这样它看起来就像：

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);
}

这应该可以解决你的问题，让我知道它是否有效

---

如果您想了解有关事件处理的更多信息，可以阅读本手册。在这里，您将找到为什么需要绑定每个事件处理程序的解释。

那么，只需要一个简单的问题，如果您从应用程序/容器调用addErrorAlert（），烤面包机会工作吗？我的意思是，你是从组件DidMount中调用它的，它有效吗？是的，它可以从该组件中正常工作。你使用的是什么版本的react toastr？你为什么不改用ToastMessageAnimated呢？文档似乎已经过时，提供的示例也不再有效。。。

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);
}