對所有消息使用單個React-Toastr容器

Question

我正在使用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(); 
} 

Answer 1

之後你提到它的工作原理在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。在那裏你會找到解釋爲什麼你需要綁定每個事件處理程序。