Question

我有这样的应用程序，并希望使用react-notification-system，

我对1件事感到好奇，是否可以在TestComponent中发生某些事情时打开通知？

换句话说，当TestComponent中发生某些事情时，如何在App.js中调用父Component？

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;

Answer 1

如果您想从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}/> (...) ) }更新应用的状态，可以将回调作为道具传递给它：

<TestComponent>

，在this.props.onTestComponentChange内，当您需要显示通知时，只需致电<ToastNotif>并传递新的通知状态。

我建议您在csv.DictReader之外获取通知系统，并使其成为独立组件

反应通知系统

1 个答案: