我應該如何處理reactJS dom操作（例如滾動操作）

可以說我想做一些非常簡單的事情 - 滾動更改標題爲固定，可以直接操作dom嗎？如果不是我該如何攻擊呢？我應該如何處理reactJS dom操作（例如滾動操作）

例如：

componentDidMount: function() { 
    $('.content').bind('scroll',function(){ 
     if ($(this).scrollTop() > 85) { 
      $('#x').addClass('fixedTitle'); 

     } else { 
      $('#x').removeClass('fixedTitle'); 

     } 
    }); 
}, 
componentWillUnmount: function() { 
    $('.content').unbind("scroll"); 
}

而且如果我想要做更復雜的東西，比如瞭解哪些元素是現在的看法，並給它一個不同的類的例子嗎？

來源

2015-04-25 Kinnza

爲什麼不根據需要附加事件，然後調用'setState'，它將重新''render'？你不應該需要jQuery來做到這一點。 – WiredPrairie

我知道，這就是爲什麼我說這是一個簡單的例子。如果我想要做更多的事情，比如計算窗口大小，並在飛行中改變樣式。或者瞭解列表中的哪個元素位於我的滾動視圖的頂部並突出顯示它，或者類似的東西。我也認爲這個小的dom操縱太費錢了，因爲爲什麼我要爲整個小小的類更改構建整個樹（可以說我的組件是整個頁面）... – Kinnza

這看起來像現在不成熟的優化。您仍然可以使用DOM API。 – WiredPrairie

JQuery工具和ReactJS並不總是很好地一起玩。如果您操縱DOM，則React的DOM虛擬表示與實際DOM不同步。如果你正在做一些小的事情，比如將課程改爲固定課程，那麼這可能不會成爲問題。

如果你正在做更大的事情，比如理解哪個元素現在處於視圖中（不完全確定你的意思是什麼），那麼該元素應該是一個反應組件。

類名也可以在React中改變，這可以基於某種狀態來完成。看看這個工具在你的反應代碼中做這樣的事情：https://github.com/JedWatson/classnames。

來源

2015-04-25 20:08:22 ritmatter

嗯，我同意你的看法，我知道在這個小例子中，我可以使用setState並相應地渲染類。但我不知道如何做更復雜的事情，比如在滾動時更改突出顯示的行，或者使用更多動畫。 – Kinnza

我應該如何處理reactJS dom操作（例如滾動操作）

回答

相關問題