React跨子组件动态操作DOM元素的实现方案咨询

我正在开发一个由多个分散组件构成的React项目，需要操作CalculatorRoutes.js文件中id为calculatorRoutes的Col组件。希望在CalculationOverview/index.js中通过按钮点击切换show状态，动态修改该Col组件的className。尝试使用useEffect但仅执行一次，无法实现动态修改，请问该如何解决？

相关代码片段 #

CalculatorRoutes.js #

<Col ref="example" id="calculatorRoutes" span={16}>
  <ActineoRoute
    path={[
      `${url}/:snr-:personId/Reserveblatt`,
      `${url}/:snr-:personId/Berechnungseinstellungen`,
      `${url}/:snr-:personId/Reserveberechnung`,
    ]}
    component={SwitchPersonHeader}
  />
</Col>

CalculationOverview/index.js 尝试代码 #

let DOMel;
useEffect(() => {
  // 👇️ use document.getElementById()
  DOMel = document.getElementById('calculatorRoutes');
  console.log(DOMel);
  console.log(show);
  DOMel.className = show ? 'ant-col ant-col-16' : 'ant-col ant-col-24';
}, []);

方式一：React数据流规范实现（推荐） #

直接操作DOM违背React的虚拟DOM设计理念，更稳妥的做法是通过状态传递来控制样式，具体步骤如下：

1. 将show状态提升到共同父组件
   找到同时包含CalculatorRoutes和CalculationOverview的父组件，把状态定义在这里：

// 共同父组件示例
import { useState } from 'react';
import CalculatorRoutes from './CalculatorRoutes';
import CalculationOverview from './CalculationOverview';

function ParentComponent() {
  const [show, setShow] = useState(true);

  return (
    <>
      <CalculationOverview show={show} setShow={setShow} />
      <CalculatorRoutes show={show} />
    </>
  );
}

2. 修改CalculatorRoutes.js，动态绑定样式
   直接接收父组件传递的show状态，根据状态设置Col的className和span属性：

// CalculatorRoutes.js
import { Col } from 'antd';

function CalculatorRoutes({ show }) {
  return (
    <Col 
      id="calculatorRoutes" 
      span={show ? 16 : 24}
      className={show ? 'ant-col ant-col-16' : 'ant-col ant-col-24'}
    >
      <ActineoRoute
        path={[
          `${url}/:snr-:personId/Reserveblatt`,
          `${url}/:snr-:personId/Berechnungseinstellungen`,
          `${url}/:snr-:personId/Reserveberechnung`,
        ]}
        component={SwitchPersonHeader}
      />
    </Col>
  );
}

3. 修改CalculationOverview/index.js，触发状态切换
   点击按钮时调用父组件传递的setShow方法切换状态：

// CalculationOverview/index.js
function CalculationOverview({ show, setShow }) {
  return (
    <button onClick={() => setShow(!show)}>
      切换布局
    </button>
  );
}

如果两个组件层级过深，状态提升不便，可以用React Context来管理show状态，逻辑和上述一致，只是更适合跨多层组件传递状态。

方式二：调整useEffect依赖（临时方案，不推荐） #

如果非要直接操作DOM，问题根源是useEffect的依赖数组为空，导致它只在组件挂载时执行一次。把show加入依赖数组，就能让useEffect在show变化时重新执行：

// CalculationOverview/index.js
useEffect(() => {
  const DOMel = document.getElementById('calculatorRoutes');
  if (DOMel) { // 增加判断避免DOM未挂载的报错
    DOMel.className = show ? 'ant-col ant-col-16' : 'ant-col ant-col-24';
  }
}, [show]); // 依赖数组加入show

注意：这种方式可能会和React的虚拟DOM更新冲突，导致样式被意外覆盖，仅作为临时修复手段。

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