Визуализация элемента React в исходный HTML - PullRequest
Новая
       49

Визуализация элемента React в исходный HTML

0 голосов
/ 14 февраля 2019

Я пытаюсь извлечь исходный HTML-код из кода реакции на стороне сервера.Для этого я использую официальную библиотечную функцию react-dom/server renderToStaticMarkup(), указанную здесь: https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup

Я читаю исходный файл реакции, перенося синтаксис JSX и ES6 в CommonJS с помощью Babel изатем синтаксический анализ вычисленного 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>

1 Ответ

0 голосов
/ 19 февраля 2019

Мне удалось решить эту проблему с помощью функции React.createElement() для оцениваемого компонента. 

    let result = renderToStaticMarkup( eval( code ) );

должно быть: 

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