Javascript 反应通知系统

我有一个这样的应用程序，想使用react通知系统

我对一件事很好奇，当TestComponent中发生某些事情时，是否可以打开通知

换句话说，当TestComponent中出现问题时，如何在App.js中调用父组件

App.js有一个路由系统

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;

类ToastNotif扩展组件{
建造师（道具）{
超级（道具）；
此.state={
toastNotifStatus:this.props.toastNotifStatus
}
}
componentDidMount（）{
this.notificationSystem=this.refs.notificationSystem；
}
组件将接收道具（新道具）{
const{notificationList}=newProps；
console.log（'componentWillReceiveProps'，newProps）；
const{removeNotification}=this.props；
如果（newProps.toastNotifStatus==='deleted'）{
此文件为.notificationSystem.addNotification({
标题：“xxx！”，
信息：“xxx”
级别：“成功”，
自动解除：0，
位置：'bl'
});
}    
}
渲染（）{
console.log（'toastnotifstatus（render'），this.state.toastnotifstatus）
返回(
)
}
}
将默认值导出到stnotif；

如果您想从

更新应用程序的状态，您可以将回调作为道具传递给它：

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}/>
    (...)
  )
 }

导出类应用程序扩展组件{
updateToastNotification（newState）{
这是我的国家({
toastNotifStatus:newState
})
}
render（）{
返回(
(...)
(...)
)
}

在

内部，当您需要显示通知时，只需调用

this.props.onTestComponentChange

并传递新的通知状态

我建议您将通知系统置于

之外，并使其成为独立组件