我在 React 中创建了选项卡,现在单击时我必须更改选项卡的类,选项卡类可能如下所示:
1:活跃
2:previousActive
3:已选
点击一个选项卡类变为active
并使用alreadySelected
类和上一个active
类检查它是否被选中事件选项卡已删除,如果它不是 alreadySelected
,则添加 alreadySelected
。
react中一个tab的代码:
var TabBody = React.createClass({
getInitialState: function() {
return {
class: 'tabBody tab activeTab'
}
},
render: function() {
a.tabBody = this;
return (React.createElement('div', {
className: this.state.class,
ref: 'body',
onClick: handleTabClick
},
React.createElement('span', {}, "Body"))
);
}
});
为了更改选项卡的类别,我正在以两种方式进行操作,想知道哪种方式有效。代码风格一:
var bodyClass = (a.tabBody.state.class).split(' ');
var sleeveClass = (a.tabSleeve.state.class).split(' ');
var neckClass = (a.tabNeck.state.class).split(' ');
if (data === 'tabBody') {
bodyClass.push('activeTab');
var str1 = program.arrayToString(bodyClass);
Interfaces.tabBody.setState({
class: str1
});
}
代码风格 2
a.tabBody.refs.body.classList.remove('activeTab');
a.tabBody.refs.body.classList.add('tabPreviewComplete');
a.tabSleeve.refs.body.classList.add('activeTab');
哪种风格适合这样做,为什么?
最佳答案
React 的要点是你不需要/不应该直接更新 DOM。 React 背后的想法是您渲染 React 组件(虚拟 DOM),然后让 React 确定是否以及如何更新 DOM。
使用 refs 更改类是一个非常危险的策略:您的组件的状态将不再与实际的 DOM 同步,这可能会让您在以后陷入调试噩梦。所以我认为代码样式 2(即使它有效)违反了 React 原则。 使用 refs 的少数异常(exception)之一是在 DOM 组件安装后添加一个监听器。
React 的方式是将类名放入状态。
并执行 setState()
更新。
让 React 进行 DOM 更新,
这很可能比获取引用和更改类名更快、更干净且更易于维护。
关于javascript - react.js 中的 setState 与 refs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33606118/