React中向外部类传递DOM元素：解决渲染时机问题

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

const Foo = () => {
    // 尝试在渲染函数体中直接获取DOM元素
    const elem = document.getElementById('foo'); // 问题所在：此时DOM元素可能还未被渲染到页面
    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
      // 进一步操作会报错，例如 domElement.getElementsByClassName('bar')
    }
}

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

const Foo = () => {
  const elemRef = useRef(null);
  // 错误：直接将ref对象传递给Bar的构造函数
  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元素
      console.log(domElement.getElementsByClassName('bar'));  // 报错: Uncaught TypeError: domElement.getElementsByClassName is not a function
    }
}

// Foo.js (推荐方案)
import { useLayoutEffect } from 'react'; // 引入 useLayoutEffect
import Bar from './Bar';

const Foo = () => {
  // 不再需要在渲染函数体中直接实例化Bar
  // let barInstance = null; // 如果需要在组件的其他地方引用bar实例，可以定义在外部

  useLayoutEffect(() => {
    // 确保DOM元素已挂载，此时 document.getElementById('foo') 将返回实际的DOM元素
    const elem = document.getElementById('foo');
    if (elem) { // 添加检查以确保元素存在
      const bar = new Bar(elem, {});
      // console.log("Bar instance created with:", elem);
      // 如果Bar实例需要被清理，可以在这里返回一个清理函数
      // return () => {
      //   if (bar && typeof bar.destroy === 'function') {
      //     bar.destroy(); // 假设Bar类有一个destroy方法用于清理
      //   }
      // };
    }
  }, []); // 空依赖数组表示此Effect只在组件挂载后运行一次

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

export default Foo;

// Bar.js (保持不变)
export default class Bar {
    constructor(domElement, config = {}) {
      console.log(domElement);  // 输出: <div id="foo">...</div> (实际的DOM元素)
      console.log(domElement.getElementsByClassName('bar')); // 可以正常调用DOM方法
    }
}

// Foo.js (更推荐的React惯用方案)
import { useRef, useLayoutEffect } from 'react';
import Bar from './Bar';

const Foo = () => {
  const elemRef = useRef(null); // 创建一个ref对象来引用DOM元素

  useLayoutEffect(() => {
    // 在useLayoutEffect中访问ref的.current属性
    if (elemRef.current) { // 确保ref已指向DOM元素
      const bar = new Bar(elemRef.current, {});
      // console.log("Bar instance created with:", elemRef.current);
      // 清理函数（如果需要）
      // return () => {
      //   if (bar && typeof bar.destroy === 'function') {
      //     bar.destroy();
      //   }
      // };
    }
  }, []); // 空依赖数组，只在组件挂载时执行一次

  return (
    <div id="foo" ref={elemRef}> {/* 将ref绑定到DOM元素 */}
      {/* 组件内容 */}
    </div>
  );
};

export default Foo;

// Bar.js (保持不变)
export default class Bar {
    constructor(domElement, config = {}) {
      console.log(domElement);  // 输出: <div id="foo">...</div> (实际的DOM元素)
      console.log(domElement.getElementsByClassName('bar')); // 可以正常调用DOM方法
    }
}