React组件中DOM元素与外部类交互：useLayoutEffect的实践

// Foo.js
import Bar from './Bar';

const Foo = () => {
    // 在组件函数体执行时，div#foo 尚未被渲染到DOM中
    const elem = document.getElementById('foo'); 
    const bar = new Bar(elem, {}); // 此时 elem 为 null

    return (
        <div id="foo">
            {/* 其他内容 */}
        </div>
    );
};

export default Foo;

// Bar.js
export default class Bar {
    constructor(domElement, config = {}) {
      console.log(domElement);  // 输出: null
    }
}

// Foo.js
import { useRef } from 'react';
import Bar from './Bar';

const Foo = () => {
  const elemRef = useRef(null);
  // 此时 elemRef.current 仍然是 null，因为 ref 赋值发生在渲染之后
  const bar = new Bar(elemRef, {}); 

  return (
    <div id="foo" ref={elemRef}>
      {/* 其他内容 */}
    </div>
  );
};

export default Foo;

// Bar.js
export default class Bar {
    constructor(domElement, config = {}) {
      console.log(domElement);  // 输出: {current: null}
      // domElement 是一个 ref 对象，不是 DOM 元素本身
      // domElement.getElementsByClassName 会报错：domElement.getElementsByClassName is not a function
    }
}

// Foo.js
import { useRef, useLayoutEffect } from 'react';
import Bar from './Bar';

const Foo = () => {
  const elemRef = useRef(null); // 用于获取DOM元素的引用
  let barInstance = null; // 用于存储 Bar 的实例

  useLayoutEffect(() => {
    // 确保 elemRef.current 存在，即DOM元素已挂载
    if (elemRef.current) {
      // 在这里，elemRef.current 已经是真实的 DOM 元素
      barInstance = new Bar(elemRef.current, {}); 
      console.log("Bar 实例已创建，并接收到 DOM 元素:", elemRef.current);
    }

    // 可选：返回一个清理函数，在组件卸载时执行
    return () => {
      // 如果 Bar 类有销毁方法，可以在这里调用
      // barInstance?.destroy(); 
    };
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  return (
    <div id="foo" ref={elemRef}>
      <h1>Hello from Foo Component</h1>
      <div className="bar-content">This content is inside the #foo div.</div>
    </div>
  );
};

export default Foo;

// Bar.js
export default class Bar {
    constructor(domElement, config = {}) {
      if (!domElement || !(domElement instanceof HTMLElement)) {
          console.error("Bar: Invalid DOM element provided.", domElement);
          return;
      }
      console.log("Bar constructor received DOM element:", domElement); 
      // 现在 domElement 是一个真实的 HTML 元素
      const innerBars = domElement.getElementsByClassName('bar-content');
      console.log("Found inner elements with class 'bar-content':", innerBars);
      // 在这里可以对 domElement 进行操作
    }
    // 如果需要，可以添加一个销毁方法
    // destroy() {
    //   console.log("Bar instance destroyed.");
    // }
}

import { useRef, useEffect } from 'react';
// ... 其他代码与 useLayoutEffect 示例类似 ...

useEffect(() => {
    if (elemRef.current) {
      // 在这里，elemRef.current 已经是真实的 DOM 元素
      barInstance = new Bar(elemRef.current, {}); 
      console.log("Bar 实例已创建 (useEffect)，并接收到 DOM 元素:", elemRef.current);
    }
    return () => { /* 清理函数 */ };
}, []);