如何使用classList获取React Component引用来更改其类？

Question

我使用以下代码创建了一个React组件。在这个我创建选项卡并添加类并将其引用存储在全局命名空间接口中以进行进一步处理。

var TabBody = React.createClass({
  getInitialState: function() {
    return {
      class: 'tabBody tab activeTab'
    }
  },
  render: function() {
    Interfaces.tabBody = this;
    tabSelectionInfo.tabBody = this;
    return (
      React.createElement('div', {
          className: this.state.class,
          onClick: handleTabClick
        },
        React.createElement('span', {}, "Body"))
    );
  }
});

现在使用以下函数，将类添加到上面的组件和控制台显示错误未定义。我如何存储此组件的refrance以便稍后更改其类。

handleTabClick = function() {
  Interfaces.tabBody.classList.add('tabPreviewComplete');
}

Answer 1

正如您在代码中指定的那样，使用名为'class'的状态变量来使用您的类名，该变量包含值'tabBody tab activeTab'

className: this.state.class,

这就是为什么你必须使用setState（）方法来改变你的className。正如在名为“Interface.tabBody”的全局命名空间中引用了您的类实例，可以通过调用setState（）来设置className。

Interface.tabBody.setState({class: 'tabBody tab activeTab disabled'});

当您想要访问React之外的类实例时，可以使用此方法。

如果你在反应中使用handleclick（），那么你可以使用以下代码

handleTabClick = function() {
  this.setState({class: 'tabBody tab activeTab disabled'});
}

通过调用setState（），React将检测更改并重新呈现组件。

Answer 2

那是因为this是对您的类实例的引用，而不是DOM元素。要访问DOM元素（因为React使用虚拟DOM），您需要创建一个reference，即：

React.createElement('div', {
  ref: 'tabBody'

然后，您可以通过this.refs.tabBody访问它

但是，您不应该在课堂外传递此引用。相反，您可以在事件发生时将引用传递给handleTabClick：

React.createElement('div', {
  ref: 'tabBody'
  onClick: e => this.props.handleTabClick(e, this.refs.tabBody)

然后你可以这样做：

handleTabClick = function(e, tabBody) {
    tabBody.classList.add('tabPreviewComplete');
}

我个人会改变状态，所以如果组件重新渲染它有正确的类。

小提琴：http://jsfiddle.net/ferahl/dpvb1h3y/

Answer 3

这是针对16.3以上的更新反应版本

使用创建构造函数中的ref

this.fooBarRef = React.createRef();

在DOM元素中分配创建的ref，

<div className="foo" ref={this.fooBarRef}>Hello</div>

安装节点元素后使用引用

//Getting node element
const fooBarNode = this.fooBarRef.current

//Adding class to node element
fooBarNode.classList.add('bar');

资料来源：React Docs