为何控制台打印React元素内部表示而非元素本身？如何解决？

问题代码 #

function TestComponent(){
    const test = ()=> {
        return <div>
            <h1 class="text-white">halo word</h1>
        </div>
    }
    console.log(test());
    return(
        {test()}
    )
}

问题描述 #

在上述TestComponent组件中，调用test()并在控制台打印时，预期会显示渲染后的div元素，但实际输出的是React元素的内部表示{$$typeof: Symbol(react.element), type: 'div', key: null, ref: null, props: {…}, …}，请问该如何解决这个问题？

解决方法 #

你要明白，test()返回的是React虚拟DOM元素，不是浏览器真实的DOM节点，所以直接打印只会显示React对这个元素的内部描述对象。要拿到真实DOM并打印，得用React的useRef钩子配合useEffect来实现：

• 给目标元素添加ref属性，让React能追踪到真实DOM
• 在useEffect里打印ref.current，因为组件挂载后ref才会指向真实DOM

修改后的代码示例 #

import { useRef, useEffect } from 'react';

function TestComponent(){
    const divRef = useRef(null);
    
    const test = ()=> {
        return <div ref={divRef}>
            <h1 className="text-white">halo word</h1>
        </div>
    }
    
    useEffect(() => {
        // 组件挂载后，ref.current就是真实的div DOM节点
        console.log(divRef.current);
    }, []);
    
    return test();
}

细节说明 #

• React里要用className代替class，这是JSX的语法规范
• 原代码return里的{test()}可以直接写成test()，返回单个元素不需要额外花括号

替代方案：打印HTML字符串 #

如果只是想查看虚拟DOM对应的真实结构，不用拿到真实DOM的话，也可以用ReactDOMServer.renderToStaticMarkup把虚拟DOM转成HTML字符串打印：

import { renderToStaticMarkup } from 'react-dom/server';

function TestComponent(){
    const test = ()=> {
        return <div>
            <h1 className="text-white">halo word</h1>
        </div>
    }
    console.log(renderToStaticMarkup(test()));
    return test();
}

这样控制台会输出对应的HTML代码：<div><h1 class="text-white">halo word</h1></div>

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