如何从ReactDOM.render渲染的组件中获取返回对象供外层JS调用

推荐使用 React 原生的 ref 配合 useImperativeHandle（函数组件场景）/ 类组件实例属性的方式实现，不需要依赖本地存储、事件监听等额外机制，完全符合 React 的设计规范。

步骤1：改造Component组件，暴露内部对象 #

函数组件场景 #

使用 forwardRef 包裹组件，配合 useImperativeHandle 将你需要对外暴露的内部对象绑定到外部传入的ref上：

// Component.jsx 示例代码
import React, { forwardRef, useImperativeHandle, useState } from 'react';

const Component = forwardRef((props, ref) => {
  // 组件内部生成的特定对象
  const targetObject = {
    data: {
      // 你需要暴露的业务属性
    },
    methods: {
      // 你需要暴露的业务方法
    }
  };

  // 将目标对象挂载到外部传入的ref上
  useImperativeHandle(ref, () => targetObject);

  // 组件原有渲染逻辑
  return <div>你的组件内容</div>;
});

export default Component;

类组件场景 #

如果你的Component是类组件，直接把需要暴露的对象挂载到组件实例上即可，不需要额外API改造：

// Component.jsx 类组件示例
import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    // 直接挂载到实例上
    this.targetObject = {
      // 你要暴露的属性和方法
    };
  }

  render() {
    return <div>你的组件内容</div>;
  }
}

export default MyComponent;

步骤2：修改对外暴露的函数，从ref获取对象 #

React 17及更早版本 #

旧版本的ReactDOM.render是同步执行的，渲染完成后ref已经完成赋值，可以直接返回：

import ReactDOM from 'react-dom';
import React from 'react';
import Component from './Component';

(function() {
  if (!window?.someFunction) {
    window.someFunction = (selector) => {
      // 创建ref用来接收组件暴露的对象
      const componentRef = React.createRef();
      ReactDOM.render(
        <Component ref={componentRef} />, 
        document.querySelector(selector)
      );
      // 直接返回ref上挂载的目标对象
      return componentRef.current;
    }
  }
})();

React 18版本 #

React 18的createRoot渲染逻辑是异步的，你可以返回Promise来保证拿到渲染完成后的对象：

import ReactDOM from 'react-dom/client';
import React from 'react';
import Component from './Component';

(function() {
  if (!window?.someFunction) {
    window.someFunction = async (selector) => {
      const componentRef = React.createRef();
      const root = ReactDOM.createRoot(document.querySelector(selector));
      
      return new Promise((resolve) => {
        root.render(<Component ref={componentRef} />);
        // 等待渲染完成后返回目标对象
        requestIdleCallback(() => resolve(componentRef.current));
      });
    }
  }
})();

方案优势 #

• 完全符合React原生设计：useImperativeHandle是官方提供的、用于对外暴露组件内部能力的标准API
• 没有额外通信开销：直接在同一上下文内传递引用，不需要跨事件、本地存储做数据同步
• 可维护性更高：类型定义更清晰，不需要做额外的序列化/反序列化处理

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