React中正确使用parentNode？是否符合最佳实践咨询

嘿，咱们来拆解一下你这段代码的问题哈～

首先，你的写法在当前结构下能运行，但非常脆弱 #

你用e.target.parentNode获取父div的方式，在当前代码的DOM结构里是能拿到正确元素的——因为你的<h1>直接被目标div包裹，点击<h1>时e.target就是<h1>本身，它的parentNode正好是你要修改的div。

但这个写法有个很大的隐患：如果之后你给<h1>加了任何子元素（比如<h1><span>Click Me!</span></h1>），点击子元素的时候e.target就会变成那个子元素（比如span），这时候parentNode就变成了<h1>，而不是你要的父div，代码直接就失效了。

其次，这绝对不是React开发的最佳实践 #

React的核心设计理念是用状态驱动UI变化，而不是直接操作DOM元素。你直接通过parentNode修改类名的方式，相当于绕开了React的状态管理机制：

• 之后你想追踪哪个div处于激活状态，或者要和其他状态联动时，会变得非常麻烦；
• 直接操作DOM也可能和React的虚拟DOM更新机制产生冲突，导致UI和状态不一致。

推荐的替代方案 #

方案1：用状态控制类名（最推荐，符合React核心思想） #

给每个父div分配唯一标识，用状态记录激活的div，然后在render时根据状态动态渲染类名：

class ClickExample extends Component {
  // 用Set来记录激活的div ID，操作更方便
  state = {
    activeDivs: new Set()
  };

  handleClick = (divId) => {
    this.setState(prevState => {
      const newActiveDivs = new Set(prevState.activeDivs);
      // 切换激活状态
      if (newActiveDivs.has(divId)) {
        newActiveDivs.delete(divId);
      } else {
        newActiveDivs.add(divId);
      }
      return { activeDivs: newActiveDivs };
    });
  };

  render() {
    return (
      <div>
        <div className={this.state.activeDivs.has('div1') ? 'someClass' : ''}>
          <h1 onClick={() => this.handleClick('div1')}>Click Me!</h1>
        </div>
        <div className={this.state.activeDivs.has('div2') ? 'someClass' : ''}>
          <h1 onClick={() => this.handleClick('div2')}>No, Click Me!</h1>
        </div>
      </div>
    );
  }
}
export default ClickExample;

这种方式完全遵循React的状态驱动逻辑，代码清晰易维护，而且不受DOM结构变化的影响。

方案2：使用React Refs（适合简单场景） #

如果是非常简单的场景，也可以给父div绑定ref，直接操作ref指向的DOM元素——这种方式比parentNode健壮，因为ref直接指向目标元素，不会受子元素结构影响，但还是尽量少用（毕竟直接操作DOM违背React的设计理念）：

class ClickExample extends Component {
  div1Ref = React.createRef();
  div2Ref = React.createRef();

  handleClick = (targetRef) => {
    targetRef.current.classList.toggle('someClass');
  };

  render() {
    return (
      <div>
        <div ref={this.div1Ref}>
          <h1 onClick={() => this.handleClick(this.div1Ref)}>Click Me!</h1>
        </div>
        <div ref={this.div2Ref}>
          <h1 onClick={() => this.handleClick(this.div2Ref)}>No, Click Me!</h1>
        </div>
      </div>
    );
  }
}
export default ClickExample;

总结 #

• 你的原始写法在当前DOM结构下能工作，但极度依赖DOM结构，很容易因为后续修改失效；
• 这不是React的最佳实践，优先选择状态驱动UI的方案；
• 如果一定要操作DOM，用React Refs比parentNode更可靠。

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