React.js

Question

kullanırken document.body sınıfına ne zaman, nasıl ve nasıl eklenir? Şu anda bunu yapıyorum, ancak bu react.js yolu değil, değil mi? Render() doğru yer mi? Alternatif nedir?

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

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

Answer 1

O en iyisidir Bu mantığı bileşeninizin dışında tutun. Olay yayıcıları bunu soyutlamanın iyi bir yoludur. Gerçekten bir veya daha fazla bileşenin devletin parçası olması gerekiyorsa

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

, onlar da olayı dinlemek ve işleyicisi kendi durumunu güncelleyebilirsiniz.

Answer 2

Eh ideal bileşenler sağlamak Tepki kapsülleme kıracak vücuda bir sınıf ekleme ve vücut yeniden işlenen alırsa sorun neden olabilir Tepki dışında DOM ile işe yaramaz. Mümkünse, sınıfı belge gövdesine eklemek yerine, onu React'un yönettiği bir bileşen kök öğesine eklemeliyim.

Ama sorunuzu cevaplamak için bu şekilde yapabilirsiniz, ancak this.state.touchMode'unuz ne sıklıkla değişebilir? sadece bileşenin bağlar/ayırır sırasında değiştiren bir şey varsa (bileşen monte zaman yalnızca bir kez çalışacak şekilde her seferinde sırasında işlemek yerine) sahipse componentWillMount bunu yapabilirsiniz:

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