React Redux Уведомляющее сообщение

Question

Я новичок в React Redux, у меня есть компонент уведомления, который показывает сообщение. Я хочу скрыть это сообщение при щелчке этого значка close. , вот мой код. Пожалуйста, предложите.

export default class NotificationMessage extends Component { 
    constructor(props) { 
     super(props); 
     this._onClick = this._onClick.bind(this); 
    }; 
    _onClick() { 
     console.log("close this button"); 

    }; 
    render() { 
     var message; 
     //let classerr = this.props.messageType ? 'notificationTheme.success' : 'notificationTheme.success'; 

     //let cssClasses = `${classerr}`; 
     if(this.props.messageType=='success') 
     { 
      message = <div className={notificationTheme.success}> 
       <span className={notificationTheme.message}>{this.props.content}</span> 
       <i className={`${iconTheme['ic-remove']} ${notificationTheme.remove} ic-remove `} onClick={() => this._onClick()}/> 

      </div> 
     } 
     else 
     { 
      message = <div className={notificationTheme.error}> 
       <span className={notificationTheme.message}>{this.props.content}</span> 
       <i className={`${iconTheme['ic-remove']} ${notificationTheme.remove} ic-remove `} onClick={() => this._onClick()}/> 

      </div> 
     } 
     return (
      message 
     ) 
    } 
} 

NotificationMessage.propTypes = { 
    config: PropTypes.shape({ 
     content: PropTypes.string.isRequired 
    }) 
}; 

Answer 1

Пройдите через функцию onClick от внешнего компонента.

showMessage() { 
    const { displayNotification } = this.state; 
    this.setState({ 
     displayNotification: !displayNotification 
    }); 
} 

Если вы основываете отображение уведомления о состоянии, то просто пройти через функцию ShowMessage в качестве опоры для уведомления об изменении состояния по щелчку значка закрытия. Затем, когда щелкнули значок закрытия, он изменит значение displayNotification на false и скроет уведомление.

Answer 2

Вы можете иметь реакцию состояния fDisplayNotification как истинные первоначально как такой

constructor(props) { 
     super(props); 
     this.state = {fDisplayNotification : true} 
     this._onClick = this._onClick.bind(this); 
    }; 

На событии нажатия кнопки установить состояние ложного

_onClick() { 
     this.setState({fDisplayNotification :false}); 
    } 

Это должны вызвать повторный рендер компонента в состоянии изменилось.

изменить способ визуализации, чтобы он возвращался пустым, если this.state.fDisplayNotification является ложным.