如何从可渲染组件数组构建JSX组件树？

function buildComponentTree(components) {
  return components.map((component, index) => {
    if (typeof component === 'string' || typeof component === 'number') {
      return component;
    } else if (typeof component === 'function') {
      return component();
    } else if (typeof component === 'object' && component instanceof Array) {
      return buildComponentTree(component);
    } else {
      throw new Error(`Invalid component at index ${index}`);
    }
  });
}

// 示例可渲染组件数组
const renderableComponents = [
  'Hello, ',
  'World!',
  () => <span>Custom Component</span>,
  [
    'Nested ',
    'Array ',
    () => <span>Nested Custom Component</span>
  ]
];

// 构建JSX组件树
const jsxComponentTree = buildComponentTree(renderableComponents);

// 渲染到页面上
ReactDOM.render(<div>{jsxComponentTree}</div>, document.getElementById('root'));