javascript - 如何使用 classList 获取 React 组件引用以更改其类？

Question

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

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

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

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

Answer 1

16.8 以上，使用 useRef功能组件的钩子(Hook)，

// useRef takes initialValue as param
const fooBarRef = useRef(null);

//DOM Usage
<div className="foo" ref={fooBarRef}>Hello</div>

挂载节点元素后useRef引用的使用，

//Getting node element
const fooBarNode = fooBarRef.current

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

16.3 以上，使用createRef对于类组件，

// Creating ref in a constructor
this.fooBarRef = React.createRef();

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

挂载节点元素后createRef引用的使用，

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

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

低于 16.3，使用 callBackRef ,

// Creating ref in a constructor
this.fooBarRef = null;
this.setFooBarRef = (ref) => {
  this.fooBarRef = ref;
}

// DOM usage
<div className="foo" ref={this.setFooBarRef}>Hello</div>

挂载节点元素后引用的使用，

//Adding class name
this.fooBarRef.classList.add('bar');