使用 ref React 设置 className

在 React 中，className 属性用于给元素添加 CSS 类。可以在 JSX 中使用 className 属性来设定样式类，也可以通过 JavaScript 动态设定。

在某些特定情况下，我们需要访问 DOM 元素，对className进行动态操作，这时候就需要使用 ref。

1. 创建 ref

使用 React.createRef() 方法来创建 ref 实例：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef}>Hello, World!</div>;
  }
}

这样，this.myRef.current 指向这个 DOM 元素。

2. 更改 className

使用 myRef.current.className 来改变 className：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  handleClick = () => {
    this.myRef.current.className = 'newClassName';
  };

  render() {
    return (
      <div ref={this.myRef} onClick={this.handleClick}>
        Click me
      </div>
    );
  }
}

点击这个元素后，它的 className 将被替换为 newClassName。

3. 添加、移除 className

使用 myRef.current.classList.add() 和 myRef.current.classList.remove() 方法来添加或移除类名：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  handleClick = () => {
    this.myRef.current.classList.add('foo');
    this.myRef.current.classList.remove('bar');
  };

  render() {
    return (
      <div
        ref={this.myRef}
        className="bar"
        onClick={this.handleClick}
      >
        Click me
      </div>
    );
  }
}

这个元素默认有 bar 类名。点击后，bar 类名将被移除，foo 类名将加入。

4. 其他操作

使用 myRef.current.style.property 来操作行内样式。

5. 总结

以上是在 React 组件中使用 ref 改变 className 的方法。ref 不仅可以用于访问 DOM 元素，还可以访问组件实例，处理键盘事件、动画等。

在某些情况下手动添加或移除类名可能并不方便或可控，在这些情况下，使用第三方库，例如 classnames，更加有效和方便。

6. 参考链接

• React Docs
• MDN Web Docs