Reagieren Benachrichtigungssystem

Question

Ich habe eine App wie diese, und reagieren Meldungs-System verwenden möchten,

Und ich bin gespannt auf 1, was ist es möglich, über die Meldung zu machen, wenn etwas in Testcomponent passiert?

Mit anderen Worten, wenn in TestComponent etwas passiert, wie Elternkomponente in App.js aufrufen?

App.js hat eine Routing-System

xyz.com/test

<Route path='/test' component={TestComponent} /> 

App.js

export class App extends Component { 
(...) 
    <Navbar/> 
    <Footer /> 
    <TestComponent/> 

    <ToastNotif 
    ref="ToastNotifRef" 
    toastNotifStatus={this.state.toastNotifStatus}/> 

(...) 

ToastNotif.js

class ToastNotif extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     toastNotifStatus: this.props.toastNotifStatus 
    } 
} 

    componentDidMount(){ 
    this.notificationSystem = this.refs.notificationSystem; 
    } 

    componentWillReceiveProps(newProps) { 
    const {notificationList} = newProps; 
    console.log('componentWillReceiveProps', newProps); 
    const {removeNotification} = this.props; 

    if(newProps.toastNotifStatus==='deleted'){ 
     this.notificationSystem.addNotification({ 
      title: "xxx!", 
      message: 'xxx' 
      level: 'success', 
      autoDismiss: 0, 
      position: 'bl' 
     }); 
    }  
} 

render() { 
    console.log('toastnotifstatus (render)',this.state.toastNotifStatus) 
    return (
     <div className="notification-component-wrapper"> 
     <NotificationSystem ref="notificationSystem"/> 
     </div> 
    ) 

    } 

} 
export default ToastNotif; 

Answer 1

Wenn Sie‘ Ich möchte den Status der App vonaktualisierenkönnen Sie es einen Rückruf als Requisiten passieren:

export class App extends Component { 
updateToastNotification(newState){ 
    this.setState({ 
    toastNotifStatus: newState 
    }) 
} 

render(){ 
    return (
    (...) 
    <TestComponent onTestComponentChange={this.updateToastNotification.bind(this)}/> 
    <ToastNotif 
     ref="ToastNotifRef" 
     toastNotifStatus={this.state.toastNotifStatus}/> 
    (...) 
) 
} 

und innen <TestComponent>, wenn Sie eine Benachrichtigung angezeigt werden müssen nur this.props.onTestComponentChange rufen und neuen Benachrichtigungsstatus übergibt.

Ich würde Ihnen empfehlen, außerhalb von <ToastNotif> Notification System zu erhalten und es eigenständige Komponente obwohl

machen