目前我正在这样做，但这不是 react.js 的方式，对吗？render() 是正确的地方吗？什么是替代方案？
var App = React.createClass({
render: function() {
if (this.state.touchMode === 2) {
$('body').addClass('touchMode');
}
return (<div> etc /div>)
}
)}
使用 React.js 时，何时、何地以及如何将类添加到 document.body
IT技术
javascript
reactjs
2021-05-20 15:30:38
2个回答
理想情况下，向主体添加一个类会破坏 React 组件提供的封装，并且如果主体被重新渲染，在 React 外部摆弄 DOM 可能会导致麻烦。如果可能，我不会将类添加到文档正文中，而是将其添加到 React 管理的组件根元素中。
但是要回答您的问题，您可以这样做，但是您多久this.state.touchMode更改一次？如果它只在组件的挂载/卸载期间发生变化，您可以在其中进行componentWillMount（这样它在组件挂载时只运行一次，而不是在渲染期间每次都运行）：
componentWillMount: function(){
document.body.classList.add('touchMode');
},
componentWillUnmount: function(){
document.body.classList.remove('touchMode');
}
最好将此逻辑保留在组件之外。事件发射器是一个很好的抽象方法。
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');
}
});
如果它真的需要成为一个或多个组件状态的一部分，它们也可以监听事件并在处理程序中更新它们的状态。
其它你可能感兴趣的问题