如何获取React元素背后的JS描述对象？

针对你给出的函数组件：

const Test = ()=> {
  return (
     <div> Hello world</div>
  )
}

要查看<Test />对应的React元素对象结构，有以下几种直接的方法：

• 直接调用组件函数并打印返回值
  函数组件的本质就是返回React元素的普通函数，直接调用Test()就能拿到它返回的元素对象，然后通过控制台打印查看：

const reactElement = Test();
console.log(reactElement);

在浏览器开发者工具的控制台里，就能看到完整的元素对象结构，包括$$typeof、type、props等字段。

• 在组件内部打印返回的元素
  修改组件代码，将返回的元素先存储并打印，这样组件渲染时会自动输出对象结构：

const Test = ()=> {
  const element = <div> Hello world</div>;
  // 打印元素对象
  console.log(element);
  return element;
}

当<Test />被渲染时，控制台会输出这个div对应的React元素对象。

• 利用JSX的编译本质打印
  JSX最终会被编译为React.createElement调用，你可以手动模拟这个过程并打印结果：

// <Test /> 编译后等价于 React.createElement(Test)
const componentElement = React.createElement(Test);
// 由于Test是函数组件，componentElement.type就是Test函数，执行它拿到最终的div元素
const finalElement = componentElement.type();
console.log(finalElement);

这种方式能更直观地理解JSX到React元素的转换过程。

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