Question

目前我正在这样做，但这不是react.js的方式，对吧？ render（）是正确的地方吗？有什么选择？

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

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

Answer 1

理想情况下，向正文添加一个类会破坏React组件提供的封装，并且在React之外摆弄DOM可能会在重新渲染主体时造成麻烦。如果可能的话，我只是将它添加到React管理的组件根元素，而不是将类添加到文档正文中。

但要回答你的问题，你可以这样做，但你的this.state.touchMode多久会改变一次？如果它只是在组件的安装/卸载期间发生变化，则可以在componentWillMount中进行更改（这样它只能在组件安装时运行一次，而不是在渲染期间每次运行一次）：

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

Answer 2

最好将此逻辑保留在组件之外。事件发射器是一种很好的抽象方法。

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

如果它确实需要成为一个或多个组件状态的一部分，它们也可以监听事件并在处理程序中更新它们的状态。

何时，何地以及如何在使用React.js时将类添加到document.body

2 个答案: