React如何获取组件返回的JSX元素而不渲染到UI

核心render2elements实现 #

你需要的函数本质是手动执行组件的渲染逻辑获取返回的JSX节点，不需要走React的DOM渲染流程，区分函数组件和类组件处理即可：

import React from 'react';

function render2elements(type, props) {
  // 处理函数组件
  if (typeof type === 'function' && !type.prototype?.render) {
    return type(props);
  }
  // 处理类组件
  if (typeof type === 'function' && type.prototype?.render) {
    const instance = new type(props);
    return instance.render();
  }
  // 普通DOM元素类型直接返回创建后的节点
  return React.createElement(type, props);
}

注意事项 #

• 上述基础实现仅针对无副作用、无Hook的纯渲染组件有效，如果函数组件用到了useState/useEffect等React Hook，直接调用会触发Hook规则报错，这种场景可以使用React测试渲染工具处理：

import TestRenderer from 'react-test-renderer';

function render2elements(type, props) {
  const testRender = TestRenderer.create(React.createElement(type, props));
  // 获取渲染后的节点树
  return testRender.toJSON();
}

• 类组件的生命周期钩子（比如componentDidMount、componentDidUpdate）不会在手动调用render的过程中触发，仅会执行构造函数和render方法，如果你的组件逻辑依赖生命周期，必须使用测试渲染工具走完整的渲染流程。
  如果你的组件使用了Hook或者依赖React上下文，强烈建议使用测试渲染工具实现，不要手动调用组件函数。

对应重构场景的处理方案 #

你只需要修改Mother组件中的getAllBabies逻辑，递归遍历children，遇到组件类型的节点就调用render2elements解析其返回的JSX结构，再从中提取Baby组件即可：

function getAllBabies(children) {
  const result = [];
  React.Children.forEach(children, child => {
    if (!child) return;
    // 是Baby组件直接收集
    if (child.type === Baby) {
      result.push(child);
      return;
    }
    // 是自定义组件类型，解析其返回的JSX再递归
    if (typeof child.type === 'function') {
      const innerChildren = render2elements(child.type, child.props);
      // 处理Fragment返回的数组结构
      const innerList = Array.isArray(innerChildren) ? innerChildren : [innerChildren];
      result.push(...getAllBabies(innerList));
    }
  })
  return result;
}

内容的提问来源于stack exchange，提问作者shau-kote