使用React.js時何地，何處以及如何添加類到document.body

Question

目前我正在這樣做，但這不是react.js方式，對吧？ render（）是正確的地方嗎？什麼是替代方案？

var App = React.createClass({ 
    render: function() { 
     if (this.state.touchMode === 2) { 
      $('body').addClass('touchMode'); 
     } 

     return (<div> etc /div>) 
    } 
)} 

Answer 1

這是最好的將此邏輯保留在組件之外。事件發射器是抽象的一個好方法。

var globalEvents = new EventEmitter(); 

var App = React.createClass({ 
    setTouchMode: function(touchMode){ 
    globalEvents.emit('touchModeChange', touchMode); 
    }, 
    render: ... 
}); 

// outside any react class 
globalEvents.on('touchModeChange', function(mode){ 
    if (mode === 2) { 
    $('body').addClass('touchMode'); 
    } 
    else { 
    $('body').removeClass('touchMode'); 
    } 
}); 

如果它確實需要成爲一個或多個組件狀態的一部分，它們還可以監聽事件並更新處理程序中的狀態。

Answer 2

那麼最好增加一個類的機構將打破陣營封裝組件提供和使用DOM外界做出反應可能會造成麻煩，如果身體被重新呈現擺弄。如果可能的話，而不是將該類添加到文檔主體中，我只需將其添加到React管理的組件根元素即可。

但要回答你的問題，你可以這樣做，但你的this.state.touchMode多久會改變一次？如果它的東西，只有部分安裝/卸載期間發生變化，你能做到在componentWillMount（這樣，只有當部件安裝運行一次，而不是每一次過程中渲染）：

componentWillMount: function(){ 
    document.body.classList.add('touchMode'); 
}, 
componentWillUnmount: function(){ 
    document.body.classList.remove('touchMode'); 
}