如何爲引導警報創建React組件？

我試圖創建一個React組件，我可以調用一個像showMessage(message, bgColor)這樣的函數，並且會彈出一個警告框，在5秒後自動關閉。如何爲引導警報創建React組件？

我在我的應用程序中創建了很多React組件，但是由於不得不打電話給alert()，它並不總是存在，並且具有所需的定時器功能，所以這給我帶來了麻煩。我無法想到設計組件的「反應」方式。

下面是我使用的作品目前的jQuery代碼，但我試圖讓遠離：

$("#alertBox").css('background-color', color); 
$("#alertBox").html(message); 
$("#alertBox").alert(); 
$("#alertBox").fadeIn(500, "linear").fadeOut(5000, "linear", function() { 
    $("#alertBox").alert('close'); 
});

問題是REACT爲從根本上聲明，該代碼只是似乎很迫切。在我的代碼庫中的某些事件處理程序中，我希望能夠調用一個函數來暫時顯示此警報框。如果不是調用alert函數並且淡入/淡出，那麼它就不會那麼糟糕（可以只是做有條件的重做）。這是我的代碼中的最後一個地方我仍然使用jQuery，我試圖從我的應用程序完全中性。

我寧願不使用react-bootstrap和react-motion，因爲幾天前我剛剛發現了它們，這是我的應用程序需要的最後一個React組件，而不是現在重寫所有的東西來使用這些庫。

來源

2015-11-21 Carl Stephens

怎麼樣，

<showMessage message={message} bgcolor={bgcolor} hide={hideMessage}/>

然後在showMessage渲染;

render() { 
 
    if (this.props.hide) return null; 
 
    if (this.state.timerDone) return null; 
 
    return (<div id="messageDive" style={whatever}></div>); 
 
}

而且你可能需要在componentReceivedProps重置timerDone並設置定時器的東西。然後當然還有timerDone方法setState（{timerDone：true}）。

來源

2015-11-21 22:07:40

這看起來不錯，但有沒有一種方法來模擬jQuery提供的淡入和淡出效果？ –

簽出ReactCSSTransitionGroup。 –

完美！謝謝 –

如何爲引導警報創建React組件？

回答

相關問題