React点击按钮修改同组件元素样式 复用组件交互失效问题

现有写法存在三个核心问题，导致多实例复用时交互异常：

1. 思路不符合React设计逻辑：React是状态驱动视图的框架，直接调用document.querySelectorAll操作全局DOM是原生JS的开发思路，会彻底打破组件的隔离性。多次复用组件时，全局DOM查询会拿到页面上所有匹配的元素，无法区分元素归属的组件实例，必然会出现操作串扰。
2. 选择器与目标元素不匹配：事件函数里查询的是带ResetButton类名的元素，但需要控制显隐的红色div根本没有添加这个类，选择器本身就无法选中目标元素。
3. 语法与规范问题：所有按钮都设置了相同的idfinish，HTML规范要求id全局唯一，重复id会导致DOM查询行为不可预期；另外JSX中类名属性需要写为className，直接写class会导致类名绑定失效。

不需要手动查询DOM，利用组件自身的state控制显隐即可天然实现实例隔离——每个组件实例的state是完全独立的，无论复用多少次，点击操作只会作用于当前实例，不会干扰其他组件。

具体实现 #

• 在组件构造函数中初始化显隐状态，默认值为隐藏
• 点击按钮时，仅修改当前组件实例的state，标记目标div为显示状态
• 渲染阶段根据当前state的值，动态给目标div拼接hidden类名

完整组件代码参考：

import React from "react";
// 引入样式文件，需提前定义.hidden { display: none; } 规则
// import "./style.css";

class ReusableComponent extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态，默认隐藏目标div
    this.state = {
      isDivVisible: false
    };
    // 保留你之前写的this绑定逻辑即可
    this.handleFinish = this.handleFinish.bind(this);
  }

  handleFinish() {
    // 仅更新当前实例的状态，不会影响其他复用的组件
    this.setState({
      isDivVisible: true
    });
  }

  render() {
    return (
      <>
        <button onClick={this.handleFinish}>
          Finish
        </button>
        <div
          style={{ height: 300, width: 300, backgroundColor: "red" }}
          // 根据状态动态拼接类名，隐藏时加hidden类，显示时移除
          className={this.state.isDivVisible ? "" : "hidden"}
        >
        </div>
      </>
    );
  }
}

export default ReusableComponent;

特殊场景的DOM操作方案 #

如果遇到必须直接操作DOM的场景（比如对接第三方原生DOM库、获取元素实时尺寸），不要使用全局DOM查询，用React内置的ref能力绑定元素即可，ref只会指向当前组件实例内的对应元素，不会出现跨实例串扰：

class ReusableComponent extends React.Component {
  constructor(props) {
    super(props);
    // 初始化ref
    this.targetDivRef = React.createRef();
    this.handleFinish = this.handleFinish.bind(this);
  }

  handleFinish() {
    // 直接操作当前实例ref绑定的元素，不会拿到其他实例的DOM
    this.targetDivRef.current.classList.remove("hidden");
  }

  render() {
    return (
      <>
        <button onClick={this.handleFinish}>Finish</button>
        {/* 给目标元素绑定ref */}
        <div
          ref={this.targetDivRef}
          style={{ height: 300, width: 300, backgroundColor: "red" }}
          className="hidden"
        >
        </div>
      </>
    );
  }
}

注意：非必要不推荐直接操作DOM，状态驱动是React的首选开发模式，代码可维护性更高，出现问题的概率更低。

内容的提问来源于stack exchange，提问作者AnatuGreen