與JQuery的反應

我正在從JQuery，Bootstrap ...重建一個項目到React，並且需要澄清一些概念。與JQuery的反應

使用jQuery的例子：我有有一個名爲ShowTarget點擊的功能和作用將使用JQuery切換的元素。

function ShowTarget() { 
     $('#target').toggle("blind", 500); 
    }

我知道如何使用反應單擊事件來顯示或隱藏#target元素，但現在我需要的("blind", 500)交易效果。

在這種情況下，我自己用CSS來實現事務效果，或者用JQuery綁定React，哪一個更好？

我在React官方網站上看到了ReactTransitionGroup，也許這個？

來源

2016-03-15 MichaelMao

您可以使用'ref'來訪問實際DOM節點，如here所述，然後調用所需的jQuery函數。

let HelloComponent = React.createClass({ 
    clickHandler(){ 
    $(this.refs.h1).toggle("blind", 500); 
    }, 
    render(){ 
    return (
     <div> 
     <h1 ref='h1'>Hello, world!</h1> 
     <button onClick={this.clickHandler}>Fade</button> 
     </div> 
    ) 

    } 
}) 


ReactDOM.render(
    <HelloComponent/>, 
    document.getElementById('container') 
);

https://jsfiddle.net/p757cbxp/

我已經做了引導的模態相似但其不推薦，因爲你沒有作出反應的知識改變DOM，但有時你只需要現有的代碼工作！ This解釋了更多關於沒有React知識的關於DOM修飾的內容和不允許的內容。

來源

2016-03-15 08:30:22 tgrrr

我不是粗魯的，但我不會推薦使用jQuery和React。完全一樣。

在點擊時向您的JSX元素添加一個className值，並使用CSS過渡或動畫對其進行動畫處理。如何添加className取決於您 - 您可以將點擊狀態存儲在flux存儲中，然後根據它應用/刪除通訊員className。

編輯16/03/2016：

一些好的建議在評論中給出。你可以通過多種方式來解決這個問題。概述的方式是標準網絡技術中最簡單的方法。當然，有很多抽象可以簡化事情。只有當你知道基本原理的工作方式後，我纔會推薦這些。

要做實際的動畫，您可以自己編寫過渡/動畫或使用庫，如animate.css。

基於反應的解決方案如ReactTransitionGroup or ReactCSSTransitionGroup或優秀的react-motion基於彈簧的動畫也是一個不錯的選擇。我只是認爲應該掌握基本概念，並在使用更高級別的抽象之前從頭開始。

來源

2016-03-15 08:49:53 Codepunkt

謝謝。我知道在React中使用JQ並不推薦，但是在這種情況下，如果我沒有使用JQ實現的事務效果，那麼我需要自己實現它。 – MichaelMao

我不會將jQuery用於動畫元素的目的。使用類似[animate.css]（https://daneden.github.io/animate.css/）的庫來執行此操作。 – Codepunkt

這是一個很好的建議。我在React offiical網站上看到了ReactTransitionGroup，那這個怎麼樣？ – MichaelMao

與JQuery的反應

回答

相關問題