如何使用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

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

Answer 2

那是因为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/

Answer 3

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

className: this.state.class,

这就是为什么你必须使用 setState() 方法来更改你的类名。由于您在名为“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 将检测更改并重新渲染组件。