为什么在控制台中返回 React 元素的内部表示而不是 React 元素本身？

Why is the internal representation of a React element returned instead of the React element itself in the console?

提问人：Mehedi Hasan 提问时间：10/19/2023 最后编辑：user2846469Mehedi Hasan 更新时间：10/21/2023 访问量：20

问： 

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

在上面的组件中，我希望渲染的 div 出现在正在调用的控制台日志中，但它显示我该如何解决这个问题？test(){$$typeof: Symbol(react.element), type: 'div', key: null, ref: null, props: {…}, …}

reactjs 元素

评论

1赞 AKX 10/19/2023
有什么要解决的？您记录的是 React 元素，而不是 HTML 元素。
0赞 Konrad 10/19/2023
html 元素是在 react 内部函数的某个地方创建的，你不会得到它

答：

0赞 user2846469 10/21/2023 #1

这是因为 React 使用了所谓的“虚拟 DOM”，并且它只在第二步中呈现为实际的 DOM。如果您确实需要记录实际的 DOM，请尝试使用：renderToString

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

console.log(renderToString(<div>hello</div>));

或者在您的情况下：

console.log(renderToString(test()));

上一个：创建快速结帐元素

下一个：如何获取包含多个json的目录中每个json文件元素的长度