React如何处理不关联状态的本地DOM事件？

首先明确：React完全支持这种不关联状态的纯视觉DOM交互场景，不用非得套自上而下的单向数据流——毕竟只是视觉变化不影响数据模型，怎么简单怎么来就行。

针对你代码里拿不到P1节点的问题，给你两种实用的实现方式：

方式1：用React Refs（推荐，更贴合组件化思路） #

在父组件里创建ref，传递给P1组件获取它的DOM节点，然后直接在highlight函数里操作这个节点：

import React, { useRef } from 'react';

export function LocalDiv(){
  // 创建ref存P1的p标签节点
  const p1Ref = useRef(null);

  const highlight = () => {
    // 确保节点已挂载再操作，避免报错
    if (p1Ref.current) {
      p1Ref.current.style.color = 'orange';
    }
  }

  // P1接收父组件的ref绑定到自身的p标签上
  function P1() {
    return <p ref={p1Ref}>it is me</p>
  }

  function P2() {
    return <p><span onMouseOver={highlight}>There</span> you are</p>
  }

  return <div><P1/><P2/></div>;
}

export function App(props) {
  return <LocalDiv></LocalDiv>
}

方式2：模拟原生ID选择器写法（贴近你熟悉的原生逻辑） #

直接给P1的p标签设ID，用原生DOM API获取节点操作，和你原来的原生示例逻辑完全一致：

import React from 'react';

export function LocalDiv(){
  const highlight = () => {
    const targetNode = document.getElementById('func_123');
    if (targetNode) {
      targetNode.style.color = 'orange';
    }
  }

  function P1() {
    return <p id="func_123">it is me</p>
  }

  function P2() {
    return <p><span onMouseOver={highlight}>There</span> you are</p>
  }

  return <div><P1/><P2/></div>;
}

export function App(props) {
  return <LocalDiv></LocalDiv>
}

小提醒 #

不管用哪种方式，都加个节点存在的判断，避免组件还没挂载就执行操作导致报错。如果需要鼠标移出恢复颜色，给span再加个onMouseOut事件改回去就行。

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