React Redux Notification消息

我是React Redux的新手，我有一個顯示消息的通知組件。我想單擊此關閉圖標來隱藏此消息。。這是我的代碼。請建議。React Redux Notification消息

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 
    }) 
};

來源

2016-11-18 Priya M

你使用React和Redux或React嗎？ – ggilberth

與redux發生反應，這是在每種形式中調用的獨立組件。根據表單中的falag分配 - {this.state.displaySNotification？： ''} {this.state.displayENotification？： ''} –

您將無法隱藏此組件內的消息，除非您更改消息以返回空白div，但我不推薦。此組件是否在另一個內部呈現？如果是這樣，我將使用該狀態來控制通知組件的呈現，並傳遞一個函數作爲更新狀態的道具。 – ggilberth

通過外部組件的onClick函數。

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

如果你是立足於國家的通知顯示，那麼就通過ShowMessage函數，作爲道具的通知來改變關閉圖標點擊狀態。然後，當關閉圖標被點擊時，它會將displayNotification更改爲false並隱藏通知。該組件作爲國家

來源

2016-11-18 11:43:24 ggilberth

你可以有最初的反應狀態fDisplayNotification真格的，這樣

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

在按鈕的單擊事件將狀態設置爲false

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

這應該觸發重新渲染改變。

如果this.state.fDisplayNotification爲false，則將render方法更改爲空。

來源

2017-03-22 22:29:25

React Redux Notification消息

回答

相關問題