Question

我是React Redux的新手，我有一个显示消息的通知组件。我想在点击此关闭图标时隐藏此消息。。这是我的代码。请建议。

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设为true

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

按钮点击事件将状态设置为false

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

这应该在状态改变时触发组件的重新渲染。

如果this.state.fDisplayNotification为false，则将渲染方法更改为空。

React Redux Notification消息

2 个答案: