将 React 元素渲染为其初始 HTML

Question

我正在尝试从服务器端的反应代码中提取初始 HTML。为此，我使用了官方的react-dom/server 库函数renderToStaticMarkup()，此处引用：https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup

我正在读取一个 react 源文件，使用 Babel 将 JSX 和 ES6 语法转换为 CommonJS，然后将评估的 CommonJS 解析为 renderToStaticMarkup()。

反应代码：

import React from 'react';

class Test extends React.Component {
    render() {
        return `<p>Hello World!</p>`;
    }
}

export default Test;

服务器端代码：

const { renderToStaticMarkup } = require( 'react-dom/server');
const Babel = require( '@babel/core' );
const Fsp = require( 'fs' ).promises;

(async () => {
    let fileContent = await Fsp.readFile( 'react.js', 'utf-8' );

    let code = Babel.transform( 
        fileContent, 
        { 
            presets: [ '@babel/preset-env', '@babel/preset-react' ],
            comments: false,
            minified: true
        }).code;

    let result = renderToStaticMarkup( eval( code ) );

    console.log( result );
})();

此示例代码返回一个空字符串""，而不是预期的<p>Hello World!</p>

Answer 1

我能够通过在评估的组件上使用React.createElement() 函数来解决这个问题。

    let result = renderToStaticMarkup( eval( code ) );

应该是：

    let result = renderToStaticMarkup( React.createElement( eval( code ), { props } ) );