16.8以上，对功能组件使用useRef钩子，

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

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

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/

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

className: this.state.class,

这就是为什么您必须使用 setState() 方法来更改您的 className。由于您在名为“Interface.tabBody”的全局命名空间中引用了您的类实例，它可用于通过调用 setState() 来设置您的 className，例如

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

当您想在 React 之外访问类实例时使用此方法。

如果您在react中使用 handleclick() 那么您可以使用以下代码

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

通过调用 setState()，React 将检测更改并重新渲染组件。