Saya memiliki aplikasi seperti ini, dan ingin menggunakan sistem-pemberitahuan-reaksi,

Dan saya ingin tahu tentang 1 hal, apakah mungkin untuk mengaktifkan notifikasi ketika sesuatu terjadi di TestComponent?

Dengan kata lain ketika sesuatu terjadi di TestComponent bagaimana cara memanggil Komponen induk di App.js?

App.js memiliki sistem perutean

Xyz.com/test

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

Aplikasi.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;
1
klijakub 23 Oktober 2017, 16:49

1 menjawab

Jawaban Terbaik

Jika Anda ingin memperbarui status Aplikasi dari <TestComponent />, Anda dapat meneruskan panggilan balik sebagai alat peraga:

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

Dan di dalam <TestComponent> saat Anda perlu menampilkan notifikasi, panggil saja this.props.onTestComponentChange dan berikan status notifikasi baru.

Saya akan merekomendasikan Anda untuk mendapatkan Sistem Pemberitahuan di luar <ToastNotif> dan menjadikannya komponen mandiri

1
Max Gram 23 Oktober 2017, 18:32